核心提示：一、理论：1.混合版本flexbox模型a.display1)flexbox 设置元素为块级容器2)inline-flexbox 设置元素为内联块伸缩容器b.display容器的基本使用1)主要用于I...
一、理论：
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.混合版本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
