vue的flex布局整理

1.flex-direction:设置容器内部元素的排列方向

flex-direction:row 默认值。灵活的项目将水平显示，正如一个行一样。（从左到右）
flex-direction:row-reverse 与 row 相同，但是以相反的顺序。
flex-direction:column 灵活的项目将垂直显示，正如一个列一样。（从上到下）
flex-direction:column-reverse 与 column 相同，但是以相反的顺序。
flex-direction:initial 设置该属性为它的默认值。
flex-direction:inherit 从父元素继承该属性。

2.定义 flex 容器

flex-nowrap: 不换行
flex-wrap: 换行
flex-wrap-reverse: 逆向换行
flex-wrap: wrap;（容器有高度则下一行平分高度）
flex-wrap: nowrap;（已经压缩元素）
flex-wrap: wrap-reverse;（容器有高度则下一行平分高度）

3.justify-content:设置元素在主轴上的对其方式

justify-content:flex-start: (默认)左对齐 或者 向上对齐
justify-content:flex-end: 右对齐 或者 向下对齐
justify-content:center: 居中对齐
justify-content:space-between: 两端对齐，元素之间平均等分剩余空白间隙部分
justify-content:space-around: 元素两边平均等分剩余空白间隙部分，最左（上）或最右（下）和元素之间距离是 1:2

4.align-items:设置容器中元素在交叉轴上的对齐方式

align-items: stretch; 默认值。元素被拉伸以适应容器。
如果指定侧轴大小的属性值为’auto’，则其值会使项目的边距盒的尺寸尽可能接近所在行的尺寸，但同时会遵照’min/max-width/height’属性的限制。
align-items: flex-start; 元素位于容器的开头。
弹性盒子元素的侧轴（纵轴）起始位置的边界紧靠住该行的侧轴起始边界。
align-items: flex-end;元素位于容器的结尾。
弹性盒子元素的侧轴（纵轴）起始位置的边界紧靠住该行的侧轴结束边界。
align-items: center;元素位于容器的中心。
弹性盒子元素在该行的侧轴（纵轴）上居中放置。（如果该行的尺寸小于弹性盒子元素的尺寸，则会向两个方向溢出相同的长度）。
align-items: baseline;元素位于容器的基线上。
如弹性盒子元素的行内轴与侧轴为同一条，则该值与’flex-start’等效。其它情况下，该值将参与基线对齐。

5.align-content:当轴线超过1条的时候，flex容器可以把多条轴线视为元素对待，

align-content:stretch; 默认值。元素被拉伸以适应容器。
align-content: center;元素位于容器的中心。
align-content: flex-start;元素位于容器的开头。
align-content: flex-end;元素位于容器的结尾。
align-content: space-between;元素位于各行之间留有空白的容器内。
align-content: space-around;元素位于各行之前、之间、之后都留有空白的容器内。

6.成员项的属性

order：成员排列顺序
Fle-grow:用于设置元素的放大比例，默认为 0（撑满主轴剩余）
Flex-shrink:控制元素比例缩小（主轴满了为前提）
Flex-basis:设置元素固定或者自动空间的占比（对自己本身进行操作）
align-self：重写容器中元素在交叉轴上的对齐方式