一、什么是弹性盒布局(可伸缩的盒子)
优势:1》写起来比较简单
2》灵活性、代码优雅
缺点:1》不兼容ie和安卓低级版本
新弹性盒(讲)
老弹性盒
二、使用
容器 (父元素)
display:flex : 让容器成员是弹性的项目
flex-direction : 决定主轴是什么方向(项目排序方向)
row : 横向
column : 竖的
row-reverse :横向翻转
column-reverse :竖的翻转
flex-wrap : 让项目是否换行
nowrap : 不换行
wrap : 换行
wrap-reverse :换行翻转
flex-flow : direction wrap
justify-content : 横向盒子摆放
flex-start : 靠左
flex-end : 靠右
center : 水平居中
space-between : 项目两端对齐,项目之间的距离都相等
space-around : 每个项目两侧距离相等,两侧距离比项目之间的距离小一倍
algin-items : 纵向盒子摆放
flex-start : 靠上
flex-end : 靠下
center : 垂直居中
baseline : 项目第一行文字为基线
stretch : 如果容器没有设置高度或者auto则占满整个高度
容器成员|项目 (子元素)
order : 排序方式,数值越小,越靠前
flex-grow : 默认值0,比例放大
flex-shrink : 默认值1,比例缩小
flex-basis : 相当于width
flex: :复合(grow + shrink + basis)
默认值:0 1 auto
后俩个值是可选择