CSS 3 Flex layout

Properties overview

Apply to the Flex container Applies to the Flex child
flex-direction order
flex-wrap flex-grow
flex-flow flex-shrink
justify-content flex-basis
align-items flex
align-content align-self

Whether applied to the Flex container or to flex children, you control the rendering of flex children, except that the former controls the whole, while the latter controls the individual.

Properties,

1. flex-direction

Flex-direction controls the overall layout direction of a child item, from left to right or right to left, and from top to bottom or bottom to top.

The attributes are as follows:

Row: Default value, displayed as rows from left to right

Row-reverse: Displays rows from right to left, opposite to row

Column: displays columns from top to bottom

Column-reverse: displays columns from bottom to top

The syntax is as follows:

flex-direction: row | row-reverse | column | column-reverse;
Copy the code

2. flex-wrap

Flex-wrap is used to control whether a child item is displayed on a single line or on a line wrap

The attributes are as follows:

Nowrap: Default, no line breaks, all subitems are displayed on a single line, and the width is compressed if the width overflows

Wrap: if the width overflows, the display will be wrapped

Wrap-reverse: Width overflow newline display, displayed from bottom up, i.e. the original newline is displayed on top of the children below

The syntax is as follows:

flex-wrap: nowrap | wrap | wrap-reverse;
Copy the code

3. flex-flow

Flex-flow is short for flex-direction and flex-wrap

The syntax is as follows:

flex-flow: row wrap;
Copy the code

When multiple attributes are used at the same time, separate them with Spaces

4. justify-content

The justify-content attribute determines how horizontal children are aligned and distributed

The attributes are as follows:

Flex-start: default, left-aligned

The flex – end: right alignment

Center: center

Space-between: both ends are aligned, and extra white space is allocated only between elements

Each subterm is surrounded on both sides by an undisturbed space of equal width, resulting in the space at both ends being half of the space in the middle

Space-instituted: evenly distributed, with evenly spaced blanks on both sides of each subitem

The syntax is as follows:

justify-content: flex-start | flex-end | center | space-between | space-arount |
  space-evenly;
Copy the code

5. align-items

Items in align-items refers to flex children, so align-items refers to the vertical alignment of flex children relative to the Flex container

The attributes are as follows:

“Stretch” : default value. Subitems are displayed as “stretch”. If the subitem is set to height, render at that height instead of stretching

Flex-start: top alignment

Flex-end: bottom aligned

Center: vertically centered

Baseline: Baseline alignment relative to the Flex container

6. align-content

Align-content can be thought of as a similar and opposite property to justify-content, which describes how flex children are aligned and distributed horizontally. Align -content refers to the alignment and distribution of flex children for each row in the vertical direction

The align-content property has no effect if all flex children have only one line

The attributes are as follows:

“Stretch” : default value. Each row of Flex child elements is stretched proportionally. For example, if there are two rows of Flex child elements, the stretch height of each row is 50%.

Flex-start: logical CSS property value, which depends on the document flow direction. The default is top stacking.

Flex-end: logical CSS property value, which depends on the document flow direction. The default is bottom stack.

Center: shows the overall vertical center alignment.

Space-between: indicates that the upper and lower lines are aligned. And then we’re left with the remaining space equally divided for each row.

Space-around: Each row of elements has independent, non-overlapping white space above and below it.

Space-instituted: Each row of elements will evenly split up and down.

7. Order (== apply to flex subitem ==)

Order can change the sort position of a Flex child

All Flex children default to the order attribute value of 0. If you want a child to appear first, set an integer value less than 0, such as -1

The syntax is as follows:

order: -1;
Copy the code

8. Flex-grow (== applies to flex child ==)

Flex-grow refers to the amount of space that a Flex child takes up, except for the space left over from the element

Flex-grow does not support negative values and defaults to 0 to expand its width without using the remaining white space. If flex-grow is greater than 0, the allocation of the remaining flex container space occurs as follows:

  • The total amount of free space is 1.

  • If only one flex child has a flex-grow property value set:

    • If the flex-grow value is less than 1, the expanded space is the total free space and the calculated value of this ratio.
    • If the flex-grow value is greater than 1, all remaining space is reserved.

  • If more than one Flex has the flex-grow property set:

    • If the sum of the flex-grow values is less than 1, the space expanded by each child item is the calculated value of the total remaining space and the flex-grow ratio set by the current element.
    • If the sum of the flex-grow values is greater than 1, then all remaining space is used in proportion to the value of the Flex-grow property. For example, if all flex children are set to flex-grow:1, the remaining white space is divided equally. If the flex-grow ratio is set to 1:2:1, the middle Flex child takes up half of the white space, and the remaining two elements are divided equally.

The syntax is as follows:

flex-grow: 0.5; /* The value can be a decimal. The default value is 0 */
Copy the code

9. Flex-shrink (== applies to the flex subitem ==)

Shrink: shrink, flex-shrink refers to the percentage of individual elements that shrink when there is insufficient space in the Flex container.

Flex-shrink does not support negative values. The default value is 1, which means that all Flex subentries shrink by default. If set to 0, it does not shrink and keeps the original width.

Given that the Flex child does not wrap and has insufficient container space, the insufficient space is the “fully shrunk size” :

  • If only one flex subentry is set to flex-shrink:
    • If the flex-shrink value is less than 1, the size of the shrink is incomplete and some content overflows the Flex container.
    • If the flex-shrink value is greater than or equal to 1, the flex container is completely shrunk to fill the container.
  • If more than one Flex subitem is set to flex-shrink:
    • If the sum of the Flex-shrink values is less than 1, the shrink size is incomplete. The ratio of the shrink size of each element to the “complete shrink size” is the set Flex-shrink value.
    • If the sum of the Flex-shrink values is greater than 1, the shrinkage is complete, with each element shrinking in the same proportion as the Flex-shrink value. The following example demonstrates this scenario.

The syntax is as follows:

flex-shrink: 0; /* The value can be a decimal. The default value is 1 */
Copy the code

10. Flex-basis (== applies to flex child ==)

Flex-basis defines the default size of an element before the remaining space is allocated.

The default value is auto. If width is set, it takes up space. If width is not set, it takes up space. If you set width and flex-basis at the same time, width is ignored for rendering performance. Flex stands for elastic, so it is not actually recommended to use the width attribute for flex children because it is not elastic enough.

When there is insufficient free space, the actual width of flex children is usually not the flex-basis size set, because flex layouts shrink by default when there is insufficient free space.

The syntax is as follows:

flex-basis: <length> | auto; /* The default is auto */
Copy the code

11. Flex (==flex subitem ==)

The Flex attribute is a contraction of flex-grow, flex-shrink, and Flex-basis.

The syntax is as follows:

flex: none | auto | [ < 'flex-grow' > < 'flex-shrink' >? || < 'flex-basis'>];Copy the code

The second and third arguments (flex-shrink and flex-basis) are optional. The default value is 0.

12. Align -self(== apply to flex subitem ==)

Align -self controls the vertical alignment of a single Flex item. The align-items property written on the Flex container, followed by items, has an S for the items, and is all. Here’s self, a single individual. The syntax is almost the same:

align-self: auto | flex-start | flex-end | center | baseline | stretch;
Copy the code

The only difference is that align-self has an auto (the default) that inherits the align-items property from the Flex container.