flex布局

容器的属性

flex-direction

设置主轴方向，有4种取值：

取值	方向
row (默认情况)	左---->右
row-reverse	右---->左
column	上---->下
column-reverse	下---->上

flex-wrap

是否换行：

取值	方向
nowrap	不换行
wrap	换行(换行在下方)
wrap-reverse	换行(换行在上方)

flex-flow

flex-flow就是flex-direction 和flex-wrap 的合集

/*  例如   */
flex-flow:row wrap;

justify-content

主轴对齐方式：

取值	方向
flex-start (默认情况)	主轴起点
flex-end	主轴终点
center	居中对齐
baseline	基准线对齐
sapce-around	每个项目两侧的间隔相等
space-evenly	每个项目两侧的间隔相等，包括两端
space-between	两端对齐，项目之间的间隔都相等

align-items

交叉轴上的对齐方式 (适用一行)

取值	方向
flex-start	主轴起点
flex-end	主轴终点
center	居中对齐
baseline	基准线对齐
stretch (默认情况)	拉伸

align-contents

交叉轴上的对齐方式 (适用多行)

取值	方向
flex-start	主轴起点
flex-end	主轴终点
center	居中对齐
baseline	基准线对齐
sapce-around	每个项目两侧的间隔相等
space-evenly	每个项目两侧的间隔相等，包括两端
space-between	两端对齐，项目之间的间隔都相等
stretch (默认情况)	拉伸

子元素的属性

align-self

覆盖本身的 align-items 属性，取值与 align-items 相同。

flex-grow

画面伸缩时，剩余空间按比例放大

flex-shrink

画面伸缩时，剩余空间按比例缩小

flex-basis

占据主轴的空间范围

flex

flex-grow ，flex-shrink，flex-basis 的合集

/*     例子      */
flex:0,0,auto;