flex弹性布局参数
display确定该元素的类型
1. none:隐藏对象
2. inline: 指定对象为行内元素
3. block: 指定对象为块元素
4. inline-block:指定对象为行内块元素
5. table-cell:指定对象为表格单元格
6. flex:弹性盒
父元素:
display:flex
justify-content:
center;主元素x轴居中
flex-start左对齐
flex-end右对齐
space-between左右两端对齐 子元素间距想等
space-around 左右间距是中间间距二倍
space-evenly 项目之间间距与项目容器间距相等
align-items:
flex-start;顶部对齐默认
centerY轴居中排列
flex-end底部对齐
flex-direction:
row默认
row-reverse反转子元素
column按列分布
column-reverse按列反转
flex-wrap:
nowrap默认 强制等分子元素宽度不换行
wrap根据自身宽度超出换行
子元素:
order: 项目排列顺序 数值越小越靠前
align-self:
center居中
flex-start;顶部对齐默认
flex-end底部对齐
flex-grow: 0 默认 1放大
flex-shink:默认1 等比缩小 0不缩小
flex-basic:auto默认 80px覆盖width
flex:上边三个属性 快捷键 auto(1 1 auto)等分放大缩小 none(0,0,auto)不放大,但是等分缩小