FlexBox
1. justify-content - which aligns items (main-axis) horizontally
It accepts the following values:
flex-start: Items align to the left side of the container.
flex-end: Items align to the right side of the container.
center: Items align at the center of the container.
space-between: Items display with equal spacing between them.
space-around: Items display with equal spacing around them.
2. align-items - this CSS property aligns items (cross-axis) vertically and
It accepts the following values:
flex-start: Items align to the top of the container.
flex-end: Items align to the bottom of the container.
center: Items align at the vertical center of the container.
baseline: Items display at the baseline of the container.
stretch: Items are stretched to fit the container.
3. flex-direction - This CSS property defines the direction items are placed in
the container (OR DEFINES DIRECTION OF MAIN AXIS).
It accepts the following values:
row: Items are placed the same as the text direction.
row-reverse: Items are placed opposite to the text direction.
column: Items are placed top to bottom.
column-reverse: Items are placed bottom to top.
NOTE: Notice that when the flex direction is a column, justify-content changes to
the vertical and align-items to the horizontal.
4. order property - we can apply the order property to individual items. By
default, items have a value of 0, but we can use this property to also set it to a
positive or negative integer value (-2, -1, 0, 1, 2).
ex: .yellow {
order:1;}
5. align-self - can apply to individual items is align-self. This property accepts
the same values as align-items and its value for the specific item.
eg: .yellow {
align-self:flex-end;}
6. flex-wrap property - Specifies whether flex items are forced on single line
or can be wrapped on multiple line.
It accepts the following values:
nowrap: Every item is fit to a single line. (default)
wrap: Items wrap around to additional lines.
wrap-reverse: Items wrap around to additional lines in reverse.
7. flex-flow - 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.
8. align-content - align-content (on cross axis) to set how multiple lines are
spaced apart from each other.
It accepts the following values:
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.
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.
