一, 在需要使用弹性盒子的容器上添加属性: display:flex 或者 display:inline-flex;
二, 在父容器上添加 flex-direction 设置子元素主轴方向:
不写默认值是 X 轴从左到右
row:X 轴从左到右
row-reverse X 轴从右到左
column Y 轴从上到下
column-reverse Y 轴从下到上
三, 设置在主轴方向的对齐方式 justify-content
flex-start 整体左对齐
flex-end 整体右对齐
center 整体居中
space-between 据主轴两端平均分布
space-around 据主轴整体平均分布
四, 设置在侧轴方向的对齐方式 align-items
flex-start 侧轴左(上)
flex-end 侧轴右(下)
center 侧轴居中
stretch 侧轴伸展延伸布局(元素在侧轴方向没有宽高)
五, 设置在侧轴方向 (有多行的情况下整体内容) 的对齐方式 align-content
flex-start 侧轴左(上)
flex-end 侧轴右(下)
center 侧轴居中
space-between 据侧轴两端平均分布
space-around 据侧轴平均分布
stretch 侧轴伸展延伸布局(元素在侧轴方向没有宽高)
六, order 属性控制顺序
在默认情况下 flex 里的元素会按照书写顺序排列, 但是可以通过 order 属性改变, 数值小的排列在前面, 还可以是负数
- .item{
- order:0
- }
来源: http://www.bubuko.com/infodetail-2601499.html