对齐布局
flex-direction:
row (默认横向排列)
cloumn (竖向排列 )
flex-wrap:
nowrap (空间不足也不换行)
wrap (空间不足换行)
flex-flow:
是flex-direction和flex-wrap的缩写版,同时定义伸缩容器的主轴(x轴)和侧轴(y轴),默认值时 row nowrap
justify-content: 用来定义主轴上的齐始位置
flex-start :起始位置在左侧
flex-end:起始位置在右侧
center:水平居中
space-between :平均分布在主轴线上
space-around:两边空出空间,平均分布在主轴线上
align-items
flex-start:(竖轴上起始位置在最上面)
flex-end:(竖轴上起始位置在最下面)
center:(竖轴上起始位置在y轴中间)
baseline:(底部基准线对对齐)
stretch :(y轴拉伸显示)
align-content: 换行后的对齐方式
flex-start:换行后起始位置在顶部显示
flex-end:换行后在底部显示
center: 换行后在中间显示
伸缩项目属性:
order:排序,数值越小排序越靠前
flex-grow:定义伸缩项目的放大比列,默认值为0,越大站的比例越大
flex-shrink:定义伸缩项目的缩小比列,默认值为1,
flex-basis:定义属性固定大小,其他样式比列伸缩