flex 布局

1. flex父容器

就是最外层的盒子，给他设置的一些属性。

display: flex;

1.1 flex-direction

子项目的排列方向

flex-direction: row;

正常顺序显示：

flex-direction: row-reverse;

反向的顺序显示

flex-direction: column;

排列方向设置为 竖着

flex-direction: column-reverse;

排列方向为 竖着 反向 排列

1.2 flex-wrap

设置父盒子内部的子盒子是否要进行换行

flex-wrap: nowrap;

禁止换行

flex-wrap: wrap;

设置换行

flex-wrap: wrap-reverse;

设置换行 反向排列

1.3 flex-flow

flex-direction 和 flex-wrap 结合一起使用

flex-flow: column wrap;

设置排列顺序为竖着的，并且进行换行

1.4 justify-content

设置子元素的水平方向对齐

justify-content: flex-start;

设置水平方向为 左 方

justify-content: flex-end;

设置水平方向为 右 方

justify-content: center;

设置水平方向为 居中

justify-content: space-between;

设置水平方向为 两边对齐 方

justify-content: space-around;

设置水平方向为 两边对齐，两边也有边距

1.5 align-items

纵向设置子元素的排列方式

align-items: stretch;

不给子元素设置高度，自适应高度，左边为开始位置。

align-items: flex-start;

自适应内容高度, 上方为开始位置。

align-items: flex-end;

自适应内容高度，下方为开始位置。

align-items: center;

自适应内容高度，居中为开始位置。

align-items: baseline;

自适应内容高度, 上方为开始位置，并以文字居中对齐。

1.6 align-content

设置多行元素的垂直对齐方式

flex-wrap: wrap;
align-content: stretch;

不给子元素设置高度，自适应高度，上边为开始位置，设置自动换行。

flex-wrap: wrap;
align-content: flex-start;

不给子元素设置高度，自适应内容高度，上边为开始位置，设置自动换行。

flex-wrap: wrap;
align-content: flex-end;

不给子元素设置高度，自适应内容高度，下方为开始位置，设置自动换行。

flex-wrap: wrap;
align-content: center;

不给子元素设置高度，自适应内容高度，居中位置，设置自动换行。

flex-wrap: wrap;
align-content: space-between;

不给子元素设置高度，自适应内容高度，两边为开始位置，设置自动换行。

flex-wrap: wrap;
align-content: space-around;

不给子元素设置高度，自适应内容高度，两边为开始位置，并且两边有边距，设置自动换行。

2. 子元素设置

2.1 order

设置子元素的排列值（值越大，越往后） order 默认值为 0。

.box1 {
  order: 5;
}
.box3 {
  font-size: 3em;
  order: -1;
}

设置第一个盒子 order 值为 5， 设置第三个盒子 order 值为-1

2.2 flex-grow

将剩余空间进行划分

.box1 {
  order: 5;
  flex-grow: 2;
}
.box9 {
 flex-grow: 4;
}

设置box1为2，设置box9为4.那么box1占剩余总空间的2份，box9占剩余总空间的4份。

2.3 flex-shrink

flex-shrink属性定义了项目的缩小比例，默认为1，即如果空间不足，该项目将缩小。

2.4 flex-basis

flex-basis属性定义了在分配多余空间之前，项目占据的主轴空间（main size）。浏览器根据这个属性，计算主轴是否有多余空间。它的默认值为auto，即项目的本来大小。

2.5 flex

设置 flex-grow， flex-shrink ， flex-basis 一起指定。默认值为0 1 auto。后两个属性可选

.box3 {
 flex: 0 10 200px;
}

2.6 align-self

设置子元素的垂直方向

align-self: auto;

默认选项

align-self: flex-start;

设置垂直方向为 上方

align-self: flex-end;

设置垂直方向为 下方

align-self: center;

设置垂直方向为 上方

align-self: stretch;

设置垂直方向为自适应。

align-self: baseline;

设置垂直方向为内容的大小