CSS Flexbox Missing Properties in freeCodeCamp

HTML-CSS
1

align-content & flex-flow

align-content:

align-content to set how multiple lines are spaced apart from each other. This property takes the following values:
flex-start; flex-end; center; space-between; space-between; space-around; stretch;

Expand details
  • flex-start : Lines are packed at the top of the container.
  • flex-end : Lines are packed at the bottom of the container.
  • center : Lines are packed at the vertical center of the container.
  • space-between : Lines display with equal spacing between them.
  • space-around : Lines display with equal spacing around them.
  • stretch : Lines are stretched to fit the container.
 #container {
   display: flex;
   flex-wrap: wrap;
   align-content: flex-end;
 }

This can be confusing, but align-content determines the spacing between lines, while align-items determines how the items as a whole are aligned within the container. When there is only one line, align-content has no effect.

flex-flow

Review flex-direction & flex-wrap before continuing further

The two properties flex-direction and flex-wrap are used so often together that the shorthand property flex-flow was created to combine them. This shorthand property accepts the value of one of the two properties separated by a space.

For example, you can use flex-flow: row wrap to set rows and wrap them.

 .container {
   display: flex;
   flex-flow: column wrap-reverse;
 }

© FlexboxFroggy Not Me :dragon_face:`

`