CSS Flex Cheatsheet

https://unsplash.com/photos/bYiw48KLbmw

1. justify-content: aligns flex items along the main axis.

• 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: Aligns flex items along the cross axis.

• 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: Defines the direction of the main axis.

• 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.

4. order: Sometimes reversing the row or column order of a container is not enough. In these cases, we can apply the order property to individual items. By default, items have a value of 0, but we can use this property to set it to a positive or negative integer value.

5. align-self: Aligns a flex item along the cross axis, overriding the align-items value.

6. flex-wrap: specifies whether flex items are forced on a single line or can be wrapped on multiple lines.

• nowrap: Every item is fit to a single line.
• 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, flex-flow: row wrap to set rows and wrap them.

8. align-content: Aligns a flex container’s lines within the flex container when there is extra space on the cross-axis.

A possible use-case :

#container{
    display: flex;
    flex-wrap:wrap;
    align-content: flex-end;
}

• 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 is a summary of CSS flex properties from https://flexboxfroggy.com/