进击的前端之Flex布局（弹性盒子）

Flex布局（弹性盒子）

DIV+CSS布局样式的重点，弹性盒子必备考点

概念

是一种可以避免浮动脱标问题，能够让布局更简单、更灵活的布局。

父元素设置display：flex;子元素可以自动的挤压与伸缩

主轴对齐方式

属性：justify-content

属性值	说明
flex-start	从起点开始依次排列
flex-end	从终点开始依次排列
center	沿主轴居中排列
space-around	弹性盒子沿主轴均匀排列，空白间距均分布在弹性盒子两侧
space-between	弹性盒子沿主轴均匀排列，空白间距均分布在相邻盒子之间
space-evenly	弹性盒子沿主轴均匀排列，弹性盒子和容器之间间距相等

侧轴对齐方式

属性：align-items

属性值	说明
flex-start	从起点开始依次排列
flex-end	从终点开始依次排列
center	沿侧轴居中排列
stretch	弹性盒子沿着主轴先被 拉伸至铺满容器

伸缩比

伸缩比是flex属性，设置弹性盒子的尺寸，只占用父盒子剩余的尺寸。一般都是flex:1

主轴方向的修改

改变内容的排列顺序与方向

属性: flex-direction

属性值	说明
row	水平
column	垂直
row-reverse	水平(内容顺序反转)
column-reverse	垂直(内容顺序反转)