flex布局属性概括

设置flex布局：display:flex / inline-flex

flex容器属性

• flex-direction
• flex-wrap
• flex-flow
• justify-content
• align-items
• align-content

1. flex-direction项目的排列方向

row	水平方向，从左至右排列
row-reverse	水平方向，从右至左排列
column	垂直方向，从上至下排列
column-reverse	垂直方向，从下至上排列

2. flex-wrap （当一条轴线上排列不下去之后）是否换行及换行的方式

nowrap	默认值，不换行
wrap	换行，第一行在上方
wrap-reverse	换行，第一行在下方

3. flex-flow 是flex-direction和flex-wrap的简写。默认为row nowrap
4. justify-content 横向（项目在主轴）的对齐方式

flex-start	主轴的起点对齐（左对齐）
flex-end	主轴的终点对齐（右对齐）
center	横向居中
space-between	两端对齐
space-around	每个项目两侧的间隔相等，项目之间的间隔比与边框的间距大一倍
space-evenly	每个元素的间距都相等

space-around 为什么大一倍，因为每个项目两边的间隔相等，而最左边和最右边的只挨着一个项目，中间的项目左边有一个项目右边有一个项目。

5.align-items 项目在交叉轴（y轴）上如何对齐，只有一条轴线

flex-start	交叉轴的起点对齐（上对齐）
flex-end	交叉轴的终点对齐（下对齐）
center	交叉轴的中心对齐，纵向居中
baseline	项目的第一行文字的基线对齐
stretch	如果项目未设置高度或设为了auto，将占满整个容器高度

6. align-content 多根轴线的对齐方式，如果项目只有一根轴线，则不起作用。

flex-start	与交叉轴的起点对齐
flex-end	与交叉轴的终点对齐
center	与交叉轴的中点对齐
space-between	与交叉轴两端对齐，轴线之间的间距平均分配
space-around	每根轴线两侧间隔相等，即轴线之间的间隔比轴线与边框的间隔大一倍
stretch	默认值，轴线占满整个交叉轴

flex项目属性

• order
• flex-grow
• flex-shrink
• flex-basis
• flex
• align-self

1.order 项目的排序顺序，数值越小，排列越靠前。默认为0
2.flex-grow 项目的放大比例，默认为0，表示有剩余空间也不放大。如果所有项目的此属性都为1，则他们等分剩余空间，
3. flex-shrink 项目的缩小比例，默认为1，即如果空间不足，项目就会缩小。如果一个项目的属性为0，其余项目属性为1，空间不足时为0的项目不缩小比例。该属性不为负数。
4. flex-basis 项目的初始长度。默认为auto

number	长度单位或百分比，规定项目的初始长度
auto	默认值，长度等于项目的长度
initial	将此属性设置为默认值
inherit	从其父元素继承此属性

5. flex 是flex-grow、 flex-shrink 、flex-basis的简写。该属性有两个快捷值：auto (1 1 auto) 和 none (0 0 auto)。
6. align-self 改变单个项目的对齐方式，可覆盖align-items属性。默认auto，表示继承父元素align-items的属性，如果无父元素，则等同于stretch。

flex-start	位于容器的开头
flex-end	位于容器的末端
center	位于容器的中央
baseline	位于容器的基线位置
stretch	定位元素以适应容器
auto	默认值，继承属性