flex弹性布局

弹性布局

属性	说明
display	指定html元素设置flex(弹性布局)
flex-direction	指定弹性盒子排列方式横/竖
flex-wrap	控制是否换行
flex-flow	flex-direction 和 flex-wrap 两个属性的简写
justify-content	主轴的排列顺序
align-items	副轴的排列顺序
align-content	设置行对齐，但不是设置元素对齐
order	设置元素 的排列顺序
flex	设置子元素弹性盒子占比

容器属性公共

值	说明
initial	设置为默认属性
inherit	从父元素继承属性值

flex-direction

值	说明
row	主轴水平从左到右（默认值）
row-reverse	主轴水平从右到左
column	主轴垂直从上到下
column-reverse	主轴垂直从下到上

flex-wrap

值	说明
onwrap	超出压缩元素不会换行
wrap	设置超出换行
weap-reverse	超出换行，换行的内容顺序相反

justify-content

值	说明
flex-start	左对齐
flex-end	右对齐
center	居中
space-between	两端对齐
space-arpund	两个项目良策的间隔相等

align-items

值	说明
stretch`	被拉伸以适合容器
center	项目在容器的中央
flex-start	项目在容器的顶部
flex-end	项目在容器的底部
baseline	项目与容器的基线对齐

align-content

值	说明
stretch	占据剩余空间
center	项目在容器在内容居中排列
flex-start	项目在容器的顶部排列
flex-end	项目与在容器的底部排列
space-between	多行第一行在顶部最后一行在底部
space-around	多行每行的间距相等