一、弹性盒布局
1、弹性盒布局的容器指的是采用了弹性布局的DOM元素,而弹性布局的条目指的是容器中包含的子DOM元素。最外围的边框表示的是容器,而编号1和2的边框表示的是容器中的条目。
弹性盒布局中有两个相互垂直的坐标轴:一个是主轴,另一个称为交叉轴。主轴并不固定为水平方向的X轴,交叉轴并不固定为垂直方向的y轴。
- 弹性盒模型,使用display:flex 来声明使用弹性盒模型,
- css3属性声明“flex-direction”用来确定主轴的方向,
- “flex-direction”属性可选值及其含义如下
2、属性值 && 含义
- row(默认值) 主轴为水平方向。排列顺序与页面的文档顺序相同。如果文档顺序是ltr 则排列的顺序是从左到右。如果是rtl,则相反。
- row-reverse 主轴为水平方向。排列顺序是从右到左
- column-reverse 主轴为垂直方向。排列顺序为从下到上
属性值 |
含义 |
row(默认值) |
主轴为水平方向。排列顺序与页面的文档顺序相同。如果文档顺序是ltr 则排列的顺序是从左到右。如果是rtl,则相反。 |
row-reverse |
主轴为水平方向。排列顺序是从右到左 |
column |
主轴为垂直方向。排列顺序是从上到下 |
column-reverse |
主 |