Basic usage of Flex layout

What is Flex layout?

Flex yes Flexible Box Abbreviation for"Elastic layout"，Used to provide maximum flexibility for the box model. Any container (box) can be assigned to it Flex Layout.

#box{ display:flex; }

.box{ display:flex; }

Properties of the container

Flex has six properties

1: flex-direction 2: flex-wrap 3: flex-flow 4: justify-content 5: align-items 6: align-content

1. Flex direction attribute

There are four values

row (default): the effect is horizontal, starting at the left.

1 2 3
Row reverse: the effect is horizontal, and the starting point is at the right end

3 2 1
column: the effect is vertical and the starting point is above.

1
2
3
Column reverse: the effect is vertical, and the starting point is below.

3
2
1

(1) flex-direction: row;

The starting point is at the left end

#box{ display: flex; flex-direction: row; }

(2) flex-direction: row-reverse;

The starting point is at the right end

#box{ display: flex; flex-direction: row-reverse; }

(3) flex-direction: column ;

The starting point is at the upper end

#box{ display: flex; flex-direction: column; }

(4) flex-direction: column-reverse ;

The starting point is at the lower end

#box{ display: flex; flex-direction: column-reverse; }

2. Flex wrap attribute

-There are three values

nowrap: no line breaks.

1 2 3 4 5 6 7 8 9 10 11 12

Wrap: wrap, first line above.

1 2 3 4 5 6 7 8
9 10 11 12

Wrap reverse: wrap line, first line below.

9 10 11 12
1 2 3 4 5 6 7 8

(1) flex-wrap: nowrap；

nowrap

.box{ display: flex; flex-wrap: nowrap ; }

(2) flex-wrap: nowrap；

Line feed

.box{ display: flex; flex-wrap: wrap ; }

(3) flex-wrap: nowrap；

Wrap and first line below

.box{ display: flex; flex-wrap: wrap ; }

3. Flex flow attribute

The flex flow attribute is actually a combination of the flex direction attribute and the flex wrap attribute. Its default value is row nowrap

.box{ display: flex; flex-flow: row-reverse wrap ; }

4. Justify content attribute

There are five values

Flex start: align left

123

Flex end: right justified

123

center: center

123

Space between: both ends are aligned, and the spacing between items is equal.

1 2 3

Space around: the space on both sides of each item is equal. Therefore, the interval between items is twice as large as that between items and borders.

1 2 3

(1)justify-content: flex-start

Align left

.box{ display: flex; justify-content: flex-start ; }

(2)justify-content:flex-end

Right align

.box{ display: flex; justify-content: flex-end ; }

(3)justify-content:center

Center

.box{ display: flex; justify-content: center ; }

(4)justify-content:space-between

Align both ends so that the spacing between items is equal.

.box{ display: flex; justify-content: space-between ; }

(5)justify-content:space-around

The spacing on both sides of each item is equal. Therefore, the interval between items is twice as large as that between items and borders.

.box{ display: flex; justify-content:space-around ; }

5. Align items attribute

5. Five values

Flex start: the boundary of the starting position is close to the starting boundary of the side axis of the row.
Flex end: the boundary of the starting position is close to the end boundary of the side axis of the row. Align the ends of the cross axes.
Center: placed in the center on the side axis (vertical axis).
Baseline: the element is on the baseline of the container..
stretch (default): if the project is not set to height or set to auto, it will occupy the height of the entire container.

(1)align-items: flex-start；

The boundary of the starting position is close to the starting boundary of the side axis of the row.

.box{ display: flex; align-items: flex-start; }

(2)align-items: flex-end；

The boundary of the starting position is close to the starting boundary of the side axis of the row.

.box{ display: flex; align-items: flex-end; }

(3)align-items: center；

The boundary of the starting position is close to the starting boundary of the side axis of the row.

.box{ display: flex; align-items: center; }

(4)align-items: baseline；

The boundary of the starting position is close to the starting boundary of the side axis of the row.

.box{ display: flex; align-items: baseline; }

(5)align-items: stretch；

The boundary of the starting position is close to the starting boundary of the side axis of the row.

.box{ display: flex; align-items: stretch; }

6. Align content attribute

5. Five values

Flex start: align with the start point of the cross axis.
Flex end: align with the end of the cross axis.
center: align with the midpoint of the cross axis.
Space between: align with both ends of the cross axis, and the spacing between the axes is evenly distributed.
Space around: (the spacing on both sides of each axis is equal. Therefore, the spacing between the axes is twice as large as that between the axis and the frame.
stretch: the axis occupies the entire cross axis.

(1)align-content: flex-start ；

The boundary of the starting position is close to the starting boundary of the side axis of the row.

.box{ display: flex; align-content: flex-start; }

(2)align-content: flex-end；

The boundary of the starting position is close to the starting boundary of the side axis of the row.

.box{ display: flex; align-content: flex-end; }

(3)align-content:center ；

The boundary of the starting position is close to the starting boundary of the side axis of the row.

.box{ display: flex; align-content:center ; }

(4)align-content:space-between ；

The boundary of the starting position is close to the starting boundary of the side axis of the row.

.box{ display: flex; align-content:space-between ; }

(5)align-content: space-aroun ；

The boundary of the starting position is close to the starting boundary of the side axis of the row.

.box{ display: flex; align-content: space-aroun ; }

(6)align-content: stretch ；

The boundary of the starting position is close to the starting boundary of the side axis of the row.

.box{ display: flex; align-content: stretch; }