css flex属性使用

块级 display: flex;
行内 display: inline-flex;

容器属性:

flex-direction, flex-wrap, flex-flow, justify-content, align-items, align-content 6个。

1. flex-direction
   决定zhu住轴的方向，即项目的排列方向

flex-direction: row | row-reverse | column | column-reverse 
起点在左 | 起点在右 | 起点在上 | 起点在下

2. flex-wrap
   决定主轴的方向，即项目的排列方向

flex-wrap: nowrap | wrap | wrap-reverse;
默认不换行 | 换行，第一行在上 | 换行，第一行在下

3. flex-flow
   flex-direction 和 flex-wrap 两个属性的简写

flex-flow: <flex-direction> <flex-wrap>

4. justify-content
   定义了项目在主轴上的对齐方式

justify-content: flex-start | flex-end | center | space-between | space-around;
左对齐 | 右对齐 | 居中 | 两端对齐，项目间距相等 | 每个项目两侧间距相等，项目间间距比项目与边框的间距大一倍

5. align-items
   定义了项目在交叉轴上的对齐方式

align-items: flex-start | flex-end | center | baseline | stretch
交叉轴起点对齐 | 交叉轴终点对齐 | 交叉轴终点对齐 | 项目第一行文字基线对齐 | 默认占满整个高度

6. align-content
   定义了多根轴线的对齐方式，如果只有一根不起作用

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

项目属性

order, flex-grow, flex-shrink, flex-basis, flex, align-self
1.order

order: <integer>;

定义项目的排列顺序，值越小，排列越前，默认0
2.flex-grow: number ;
定义了项目的放大比例，
3.flex-shrink: number
定义了项目的缩小比例，如果空间不足，该项目将缩小，默认是1
4.flex-base
定义了分配多余空间，项目占据的主轴空间，设置固定值

flex-base: <length> | auto;

5.flex 多个合并简写

flex: none | [<'flex-grow'> <'flex-shrink'> ? || <'flex-basis'>]
// 后两个属性可选
auto (1 1 auto) 和 none (0 0 auto)

6.align-self
允许单个项目与其他项目不一样的对齐方式，可覆盖align-items属性，默认auto

align-self: auto | flex-start | flex-end | center | baseline | stretch;