css flex弹性布局

一.容器属性

display:flex; /*设置该容器内为弹性布局*/
flex-direction: row; /*设置该容器内子元素排列方向，可选row(默认)、row-reverse(从右开始排列)、column(纵向，从上到下)、column-reverse(纵向，从下到上)*/
flex-wrap: nowrap;/*不换行(默认)，可选wrap(换行)*/
justify-content: flex-start;/*排列方式，默认起点对齐，可选flex-end;结束点对齐，center;居中对齐，space-between;两端对齐，space-around;周围分布相同空间，space-evenly;均匀分布*/
align-items: normal;/*中轴线的对齐方式，默认normal 同flex-start，可选flex-start、center、flex-end对应上中下*/
justify-content: flex-start;/*多轴线对齐方式，默认起点对齐，可选flex-end;结束点对齐，center;居中对齐，space-between;两端对齐，space-around;周围分布相同空间，space-evenly;均匀分布*/

二.容器中子项属性

order:0;/*子项顺序，默认0，可以为负数*/
flex-grow:0;/*子项分配剩余空间比例，默认0*/
flex-shrink: 1; /*在不换行的前提下，空间不够分配，子项收缩比例，默认值1，值越大收缩越大，为0时，不收缩*/
flex:0 1 auto;/*子项简写，对应增长规则，缩小规则，初始化尺寸*/