CSS Learning (20)-flexbox Model

CSS Learning (20)-flexbox Model
I. theory:
1. Mixed version flexbox Model
A. display
1) The flexbox setting element is a block-level container.
2) The inline-flexbox setting element is an inline block scaling container
B. basic use of the display container
1) mainly used in IE10 browsers
2. Scale the stream to flex-direction
A. flex-direction
1) row ltr --> from left to right, rtl --> from right to left
2) row-reverse ltr --> from right to left, rtl --> from left to right
3) column is arranged from top to bottom in the order of appearance
4) column-reverse scaling projects are arranged from bottom to top
Ii. Practice:

(Note: 1, 2, 3 is the scaling layout box, and 4, 5 is the flexbox Model)

1.

 

HeaderMainContentLeftContentRightContent

Footer

2.

 

HeaderMainContentLeftContentRightContent

Footer

3.

HeaderMainContentLeftContentRightContent

Footer

4.

 

Box1Box2Box3Box4Box5Box6 5.

Box1Box2Box3Box4Box5Box6