Flexbox flex property

flex (flexible box, telescopic box)

-is another layout method in css, it is mainly used to replace the floating to complete the layout of the page

-flex can make elements flexible, allowing elements to change according to the size of the page

-flex container

- To use a flex box, an element must first be set as a flex container

  -Set the elastic container through display

Display:flex sets a block-level flex container

Set display:inline-flex as an inline flex container

- elastic element

- the direct child of the flex container is the flex element (flex item)

Note: An element can be both a flex container and a flex element at the same time

One: Properties of Elastic Containers

1:flex-direction 2:flex-wrap

3:flex-flow 4:justify-content

5:align-items 6:align-content

1:flex-direction: ; specifies the arrangement of flex elements in the container

Optional values:

The default value of row, the flex elements are arranged horizontally in the container (left to right)

Main axis - left to right

Row-reverse Elastic elements are arranged horizontally in reverse (right to left) in the container

Main axis - right to left

The column elastic elements are arranged vertically (from top to bottom)

Main axis - top to bottom

Column-reverse elastic elements are arranged vertically (from bottom to top)

Main axis - bottom to top

Main axis: The arrangement direction of elastic elements is called the main axis

Side axis: the direction perpendicular to the main axis is called the side axis

2: flex-wrap: ;Set whether the flex element wraps automatically in the flex container

Optional values:

The default value of nowrap, the element will not wrap automatically

wrap element automatically wraps along the minor axis

wrap-reverse element wraps in the opposite direction of the minor axis

3:flex-flow: Shorthand properties for wrap and direction, and no ordering requirements

Default row nowrap

4:justify-content How to allocate empty space on the main axis (how the elements on the main axis are arranged)

Optional values:

flex-start elements are aligned along the main axis starting edge

flex-end elements are aligned along the end of the main axis

The center element is centered

Space-around whitespace is distributed to both sides of the element

Space-between whitespace evenly distributed between elements

Space-evenly whitespace is distributed to one side of the element (less compatibility)

5: align-items How to align on the secondary axis - the relationship between elements

Optional values:

The default value of stretch is to set the length of elements on the same line to the same value

The flex-start element does not stretch and is aligned along the minor axis

The flex-end element does not stretch and is aligned along the end edge of the minor axis

align center center

baseline baseline alignment (incorrect use)

6: align-content: ;Distribution of blank space on secondary axis

Optional values:

flex-start elements are aligned along the minor axis

flex-end elements are aligned along the end of the minor axis

The center element is centered

Space-around whitespace is distributed to both sides of the element

Space-between whitespace evenly distributed between elements

Space-evenly whitespace is distributed to one side of the element (less compatible)