添加浏览器前缀: -webkit- 也可用postCss自动添加
display:-webkit-flex; *如果用了弹性布局,子元素不需要浮动,
-webkit-justify-content: 子元素水平排列方式方式。
center 水平居中
space-between 两端对齐
space-around 手拉手平均分
flex-start 居左对齐
flex-end 居右对齐
-webkit-align-items: 子元素垂直排列
center 垂直居中
space-between 上下两端对齐
space-around 手拉手上下平均分
flex-start 顶部对齐
flex-end 底部对齐
-webkit-flex-direction: 排列方式
row 默认值 横向排列
row-reverse 横向颠倒排列 *不常用
column 垂直排列
column-reverse 垂直颠倒排列 *不常用
-webkit-flex-wrap: 默认no-wrap让元素步换行
wrap 换行
nowrap 不换行
-webkit-align-content: 控制容器内多行在Y轴上的排列方式
center 居中对齐
flex-start 顶部对齐
flex-end 底部对齐
space-between 上下对齐
space-around 上下手拉手对齐
子级
flex:1 1指的是一个系数 *子元素再划分父元素宽度,先刨除固定宽度
flex-grow:1 定义子元素放大比例