Flexbox 2

The Main Axis

Flexbox containers lay out their content according to their main-axis. This can be changed but the default is from left to right or flex-direction: row;. Other values all change the main axis:

• flex-direction: column; from top to bottom
• flex-direction: row-reverse; from right to left.
• flex-direction: column-reverse; from bottom to top.

Justify Content

When the main axis is left to right justify-content lay out the child elements of a flex container along the axis like so:

• justify-content:flex-start; (the default)
  1

  2

  3
• justify-content: flex-end;
  1

  2

  3
• justify-content: center;
  1

  2

  3
• justify-content: space-around;
  1

  2

  3
• justify-content: space-between
  1

  2

  3

If you were to rotate the above flex containers 90 degrees clockwise using flex-direction: column; then the all the child elements would be spaced as if they had been rotated too.

(There is also justify-content: initial; and justify-content: inherit;.)

Align-Items

Next is align-items. When the property starts with align it indicates it is working across the main axis rather than along it.

Assume the main-axis is going left to right this sets the vertical position or cross-axis of flexbox items. This also means the flexbox container’s height will be greater than needed so the flexbox items can be at the top, the center, the bottom.

• align-items: stretch (the default)
  1

  2

  3
• align-items: flex-start
  1

  2

  3
• align-items: flex-end
  1

  2

  3
• align-items: center
  1

  2

  3
• align-items: baseline
  1

  2

  3

align-content

This only has an effect when:

1. Flex items are wrapped into multiple lines.
2. The flex container has extra space, typically because it has a height specified.

Ordering content

Content ordering is done on individual flex items. A positive number moves them forward along the main axis. A negative number moves them backwards.

• With no ordering:
  1

  2

  3
• Using order: -1; on box 2
  1

  2

  3
• Using order: 2 on box 1.
  1

  2

  3
• Using order: -2 on box 3.
  1

  2

  3

To Do

• justify-content
• align-items
• flex-direction
• order
• align-self
• flex-wrap
• flex-flow
• align-content

ul.flex-examples {
  list-style: none;
  margin: 0;
  padding: 0;
  /* column-count: 2; */
  /* display: flex; */
  /* flex-wrap: wrap; */
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 15px;
}
ul.flex-examples > li {
  display: table;
}
.flexsimple {
  display: flex;
  width: 350px;
  padding: .6em;
  /* margin: .5em 0 2em 0; */
  background: var(--MainBorderColor);
}

.flexsimple > div {
  padding: 1.2em;
  color: #333;

}

.flexsimple > div:nth-child(3n+1) {
  background: lightblue;
}
.flexsimple > div:nth-child(3n+2) {
  background: pink;
}
.flexsimple > div:nth-child(3n+3) {
  background: lightgreen;
}
/* --- These are for the Jusify-content examples --- */

#fe1 #set1 {
  justify-content: flex-start;
}
#fe1 #set2 {
  justify-content: flex-end;
}

#fe1 #set3 {
  justify-content: center;
}

#fe1 #set4 {
  justify-content:space-around;
}
#fe1 #set5 {
  justify-content: space-between;
}


/* This is a way to center the content, the numbers, inside the little boxes --- */
#fe2 > li > .flexsimple > div {
  display: flex;
  justify-content: center;
  flex-direction: column;
  text-align: center;
}

/* For flex2.md align-content example */

section.align-content {
  display: flex;
  gap: 2em;
}

.align-content-container {
	flex-wrap: wrap;
	height: 400px;
}
#align-content-options {
	font: inherit;
	padding: 0.5em 1em;
	margin-top: 1em;
	background: light-dark(#adc0ad, #1d2229);
	border-radius: 0.5em;
	border: none;
}

/* For ordering content examples */

#fe2 .flexsimple {
  height: 250px;
}

.set21 > div {
  height: auto;
}

#fe2 .set21 {
  align-items: stretch;
}
#fe2 .set22 {
  align-items: flex-start;
}
#fe2 .set23 {
  align-items: flex-end;
}
#fe2 .set24 {
  align-items: center;
}
#fe2 .set25 {
  align-items: baseline;
}
/* ====== For flex3.md ======== */

.flex-grow-05 div {
    flex-grow: 0.25; 
}

#flex-0 {
    flex-grow: 0;
    width: min(650px, 100%);
    min-height: 10em;
    resize: inline;
    overflow: auto;
}

.flex-110 {
    flex: 1 1 0;
}
.active-btn {
    background-color: darkred;
}