一、理论：
1.混合版本flexbox模型
a.display
1)flexbox 设置元素为块级容器
2)inline-flexbox 设置元素为内联块伸缩容器
b.display容器的基本使用
1)主要用于IE10浏览器
2.伸缩流方向flex-direction
a.flex-direction
1)row ltr-->自左向右排列，rtl-->自右向左排列
2)row-reverse ltr-->自右向左排列，rtl-->自左向右排列
3)column 按出现顺序从上到下排列
4)column-reverse 伸缩项目从下到上排列
二、实践：

(注：1，2，3是伸缩布局盒，4，5是flexbox模型)

1.

 

Header

MainContent

LeftContent

RightContent

footer

2.

 

Header

MainContent

LeftContent

RightContent

footer

3.

Header

MainContent

LeftContent

RightContent

footer

4.

 

Box1

Box2

Box3

Box4

Box5

Box6

5.

Box1

Box2

Box3

Box4

Box5

Box6