CSS弹性布局flex属性整理

1.align-items

align-items属性：指定弹性布局内垂直方向的对齐方向。

常用属性：

center      垂直居中展示

flex-start   头部对齐

flex-end     底部对齐

2. justify-content

justify-content属性：属性（水平）对齐弹性容器的项目，当项目不占用主轴上所有可用空间时

常用属性：

flex-start：默认值。项目位于容器的开头

flex-end：项目位于容器的结尾

center：项目位于容器中央

space-between：项目在行与行之间留有间隔。

space-around：项目在行之前、行之间和行之后留有空间

3.align-self

align-self属性：用于指定弹性布局内某一个元素的垂直对齐方式，会覆盖布局的align-items属性。

常用属性：

center      元素居中

flex-start   元素位于头部

flex-end     元素位于底部

4.align-content

align-content属性：用于修改flex-wrap属性的行为，与align-items 相似，但不用于对齐项目，而是用于对齐弹性线（垂直方向），必须有多行项目，该属性才生效。

常用属性：

center      垂直居中展示

flex-start   头部对齐

flex-end     底部对齐

space-between   两端对齐

space-around      均分

5. flex-basis

flex-basis属性：属性规定弹性项目的初始长度，可以设置某一个弹性元素的长度

6.flex-direction

flex-direction属性：属性规定弹性项目的方向

常用属性：

row：默认值。作为一行，水平地显示弹性项目。

row-reverse：等同行，但方向相反。

column：作为列，垂直地显示弹性项目

column-reverse：等同列，但方向相反

7. flex-wrap

flex-wrap属性：属性规定弹性项目是否应换行

常用属性：

nowrap：默认值。规定弹性项目不会换行

wrap：规定弹性项目会在需要时换行

wrap-reverse：规定弹性项目会在需要时换行，以反方向

8. flex-flow

flex-flow属性：flex-direction、flex-wrap属性的简写

flex-direction：规定弹性项目方向

flex-wrap：是否换行

9.flex-grow

flex-grow属性：属性规定在相同的容器中，项目相对于其余弹性项目的增长量

10.flex-shrink

flex-shrink属性：属性固定在相同的容器中，项目相对于其余弹性项目的收缩量、

11.flex 

flex属性：flex-grow、flex-shrink、flex-basis属性的简写

flex-grow：相对于其余的增长量

flex-shrink：相对于其他的收缩量

flex-basis：项目的长度