01、弹性布局
弹性布局
1.他是css3推出的布局方式
2.低版本浏览器都支持
3.所有移动端你都支持
设置弹性容器(弹性盒子)
块 -> 弹性容器:
display:flex;
行 -> 弹性容器:
display:inline-flex;
一般行不会设置为弹性容器
设置弹性布局,只需要给父容器设置 display:flex;
flex-direcrion 设置主轴方向
row:默认值,主轴为水平方向,起点在左边
row-reverse:主轴为水平方向,起点在右边
column:主轴为水平方向,起点在右边
column-reverse:主轴为垂直方向,起点在下边
flex-wrap:设置子元素是否换行
nowrap:默认值,不换行,子元素可能会被压缩
wrap:换行,行的起点在上边
wrap-reverse:换行,行的起点在下边
以上两个属性可以合写为 flex-flow
flex-flow:flex-direction flex-wrap;