Flex layout

A brief introduction to Flex

In 2009, the W3C introduced a new solution, —-Flex layout, that enables easy, complete, and responsive implementation of a variety of page layouts.

Learn flex layout online at Flexbox Froggy

Flex layout principle

Flex, short for Flexible Box, is used to provide maximum flexibility to Box models, and any container can be specified as a Flex layout.

• When we set the parent box to flex layout, the float, clear, and vertical-align attributes of the child elements are invalidated.
• Flex layout is also called flex layout, elastic layout, flex box layout, or elastic box layout
• Elements with a Flex layout are called Flex Containers, or “containers” for short. All of its child elements automatically become container members, called Flex items Flex Items

Summary: You can control the placement and arrangement of child boxes by adding flex properties to the parent box

Common attributes of the Parent of Flex Container

• Flex-direction: sets the spindle direction
• Context-content: Sets the arrangement of child elements on the main axis
• Flex-wrap: Sets whether a child element is wrapped on a line
• Aligin-content: Sets the arrangement of the children of the side axis (multiple lines)
• Aligin-items: Sets the arrangement of child elements on the side axis (single row)
• Flex-flow: compound property, equivalent to setting both flex-dreAction and flex-wrap

1. Flex-direction Sets the spindle direction

• In flex layout, there are two directions: the main axis and the side axis, also called row and column, x and Y axis
• The default principal axis is the x axis, horizontal to the right
• The default side direction is the y direction, horizontal down

• Note: the main axis and side axis can change depending on which flex-direction is set to the main axis, leaving the side axis. The child elements follow the principal axis

2. Context-content sets the arrangement of child elements on the main axis

3. Flex-wrap Sets whether to wrap a line

• By default, Flex items are arranged on a line, also known as an “axis.” The flex-wrap property defines no line breaks in flex layouts by default.

4. Align -items Sets the arrangement of child elements on the side axis (single row)

• This property controls the arrangement of the children on the side axis (default is the y axis) when the children are single (single row)

5. Align-content Sets the arrangement of child elements on the side axis (multiple lines)

Sets the arrangement of children on the side axis and can only be used when children break a line (multiple lines), it has no effect on a single line.

6. The difference between align-content and align-items

• Align-items work on a single line, with only up-aligned, down-aligned, centered, and stretched
• Align-content is suitable for line feed (multiple lines) (not valid for single line). You can set up, down, center, stretch, and evenly allocate the remaining space.
• So the summary is single line for align-items and multiple lines for align-content

7. The flex-flow attribute is a compound of the Flex-direction and flex-wrap attributes

flex-flow:row wrap;
Copy the code

Common properties of Flex layout subitems

• Number of flex subprojects
• Align-self controls how the children align themselves on the side axis
• The order attribute defines the order in which the children are sorted (sequential)

1. The flex properties

The Flex property defines the remaining space allocated by the subproject.

The Flex property is a shorthand for the Flex-grow, Flex-shrink, and Flex-basis properties.

Default value: 0 1 Auto.

• Flex-grow: Set the expansion ratio, the elastic expansion ratio of the child container, and allocate the remaining space to the child container proportionally

• Flex-shrink: Sets the shrink ratio, the elastic shrink ratio of the child container. If the child container exceeds the size of the child container, the value of the child container will be subtracted according to the corresponding ratio

• Flex-basis: Sets the base size. When the main axis is x, flex-basis sets the size to width and overrides the width value. When the main axis is y, flex-basis sets the size to height and overrides the heGIHT value

2. Align-self controls how the sub-items align themselves on the side axis

The align-self property allows a single item to have a different alignment than other items, overriding the align-items property.

The default value is auto, which inherits the align-items property of the parent element. If there is no parent element, it equals stretch.

Span :nth-child(2) {/* Align -self: flex-end; }Copy the code

3. The order attribute defines the order of items

The smaller the value is, the more advanced it is. The default value is 0.

Note: Not the same as z-index.

.item {
    order: <number>;
}
Copy the code