CSS Flex Layouts

Container Properties flex-direction Property

Determines the direction of the spindle.
There are 4 optional Values :

• Row(default): The spindle is horizontal and the starting point is on the left side.
• Row-reverse: The spindle is in the horizontal direction, starting at the right end.
• Column: The spindle is in the vertical direction, starting at the top edge.
• Column-reverse: The spindle is in the vertical direction, starting at the bottom edge.

Flex-wrap Property

Decide on an axis line, how to change the line.
There are 3 optional values :

• NoWrap(default): No Line break.
• Wrap: Wrap, the first line is above.
• Wrap-reverse: Line break, the first line is below.

justify-content Property

Determine the alignment of the project on the spindle
There are 5 optional Values :

• Flex-start(default): Left Justified
• Flex-end: Right-justified
• Center: Center
• Space-between: Justified, the interval between items is equal.
• Space-around: The intervals on each side of the item are equal.

Align-items Property

Determine how the item aligns on the cross axis
There are 5 optional Values :

• Flex-start: The start alignment of the intersection axis.
• Flex-end: The end alignment of the intersection axis.
• Center: The midpoint alignment of the intersection axis.
• Baseline: The baseline alignment of the first line of text for the item.
• Stretch(default): If the item is not set to height or auto, it fills the height of the entire container.

align-content Property

Determining the alignment of multiple axes
There are 6 optional values :

• Flex-start: Aligns with the starting point of the intersection axis.
• Flex-end: Aligns with the end of the intersection axis.
• Center: Aligns with the midpoint of the intersection axis.
• Space-between: aligned with the intersection axis and evenly spaced between the axes.
• Space-around: The intervals between each axis are equal. Therefore, the spacing between the axes is one times larger than the interval between the axes and the border.
• Stretch(default): The axis fills the entire cross axis.

Project Properties Order Property

determines the order in which the items are arranged. The smaller the number, the higher the alignment, and the default is 0.

Flex Properties

Flex properties are shorthand for Flex-grow, Flex-shrink, and flex-basis , and the default value is 0 1 auto. The latter two properties are optional.
The Flex-grow property defines the magnification of the item, which defaults to 0, that is, if there is space left, it is not zoomed in.
The Flex-shrink property defines the scaling of the project, which defaults to 1, which means that if there is notenough space, the project shrinks.
The Flex-basis property defines the spindle space (main size) that the item occupies before allocating the extra space. Based on this property, the browser calculates whether the spindle has extra space. Its default value is auto, which is the original size of the project.

align-self Property

align-self Align-items auto align-items stretch
There are 6 :

• Auto
• Flex-start: The start alignment of the intersection axis.
• Flex-end: The end alignment of the intersection axis.
• Center: The midpoint alignment of the intersection axis.
• Baseline: The baseline alignment of the first line of text for the item.
• Stretch(default): If the item is not set to height or auto, it fills the height of the entire container.

CSS Flex Layouts