Getting Started with flex layouts

Basic concepts

Flex is the abbreviation for flexible box, the elastic box model, so it's not a single attribute, but a complete set of properties, some of which are set on the container (the parent element, called Flex container), The rest of the properties are set on the child element (flex items).

Elastic box model based on Flex-flow directions layout, make a diagram easy to understand

Flex items are arranged along the spindle (from Main-start to main-end) or cross axes (from Cross-start to Cross-end).

The flex-container shown has two axes, a spindle (main axis) and a crossover axis (cross axis), the spindle starts at main start, ends at Mian end, and the cross axis starts with the intersection and ends at the crossing end.

• Spindle (main axis)-------Flex-items along the main axis of the Flex container, note that the spindle is not necessarily horizontal, depending on the value of the Flex-direction property
• The cross axis-------perpendicular to the spindle, and the direction depends on the value of the Flex-direction property.

Properties of the Flex-container

Display

/**/{    display: flex;   /*  */    display: -webkit-flex;}

Flex-direction

. Container {    flex-direction: row | row-reverse | column | column-reverse;}

Flex-wrap

By default, Flex-items is arranged on a single line, and the parent width is not wrapped

If set to Wrap,flex-items width sum exceeds parent width, it is arranged as shown

. Container {    flex-wrap: nowrap | wrap | wrap-reverse;}

• NoWrap (default): Single row from left to right
• Wrap: Multiple rows from left to right
• Wrap-reverse: Multiple rows from right to left

The case of wrap and wrap-reverse, respectively

Flex-flow

Flex-flow is a shorthand form for flex-direction and Flex-wrap, and the default value is row nowrap.

. Container {    flex-flow: <flex-direction> <flex-wrap>;}

Justify-content

This attribute defines how the Flex-items is aligned on the spindle.

. Container {    justify-content: flex-start | flex-end | center | space-between | Sapce-around;}

The exact alignment of this property is related to the value of flex-direction, assuming that the value of flex-direction is row, that is, the spindle direction is left to right

• Flex-start (default): Left Justified
• Flex-end: Right-justified
• Center: Center Alignment
• Space-between: Justified, the interval between items is equal
• Space-around: Equal intervals on each items side

Align-items

This property defines how the Flex-items is aligned on the intersection axis

Getting Started with flex layouts