弹性盒模型学习

一、弹性盒布局

   1、弹性盒布局的容器指的是采用了弹性布局的DOM元素，而弹性布局的条目指的是容器中包含的子DOM元素。最外围的边框表示的是容器，而编号1和2的边框表示的是容器中的条目。

   弹性盒布局中有两个相互垂直的坐标轴：一个是主轴,另一个称为交叉轴。主轴并不固定为水平方向的X轴，交叉轴并不固定为垂直方向的y轴。

• 弹性盒模型，使用display：flex 来声明使用弹性盒模型，
• css3属性声明“flex-direction”用来确定主轴的方向，
• “flex-direction”属性可选值及其含义如下

2、属性值 && 含义

---

• row（默认值）      主轴为水平方向。排列顺序与页面的文档顺序相同。如果文档顺序是ltr 则排列的顺序是从左到右。如果是rtl,则相反。

---

• row-reverse          主轴为水平方向。排列顺序是从右到左

---

• column                 主轴为垂直方向。排列顺序从上到下。

---

• column-reverse     主轴为垂直方向。排列顺序为从下到上

---

属性值	含义
row（默认值）	主轴为水平方向。排列顺序与页面的文档顺序相同。如果文档顺序是ltr 则排列的顺序是从左到右。如果是rtl,则相反。
row-reverse	主轴为水平方向。排列顺序是从右到左
column	主轴为垂直方向。排列顺序是从上到下
column-reverse	主轴为