Flex布局-精华摘要

【背景】：传统的CSS布局思路--“盒模型”，在适配移动端开发时，因设备尺寸的差异，显得力不从心，尤其是一些Float特性的处理。

【Flex布局】：CSS3引入--“Flex布局”，又称“弹性盒模型”。为了更加有效的布局、对齐元素（尽管有时元素的大小并不固定）

【Flex布局/弹性盒模型的特征】:
1. 元素以两个坐标方向布局: 主轴(水平方向） + 交叉轴（垂直方向），两者可切换
2. Flex布局的元素都存在于Flex容器中。父容器可设置所有子容器的排列方式，子容器也可设置自身排列方式。
3. 以Flex容器的起始和结束，分别作为坐标的起始和结束点。
4. Flex自动伸缩，默认可以填充整个剩余的空间。

即： Flex弹性盒模型主要是赋予元素具备更改自身宽高，以便完全填充剩余可用空间，因此可适配不同的设备。

//全局样式：为了截图更清晰
* {
    margin: 0;
    padding: 0;
}
.one {
    background-color: red;
}
.two {
    background-color: green;
}
.three {
    background-color: blue;
}

<div class="test">
    <p>One</p>
    <p>Two</p>
    <p>Three</p>
</div>

1 . justify-content（定义元素沿主轴的对齐方式）

.test {
    display: flex;
    justify-content: flex-start;
}

【justify-content】： flex-start（default)、flex-end、center、space-between、space-around
1. flex-start： 定义所有子容器沿着主轴的起始端对齐;
2. flex-end： 定义所有子容器沿着主轴的结束端对齐;
3. center： 定义所有子容器沿着主轴居中对齐;
4. space-between： 定义所有子容器沿着主轴均匀分布，首尾子容器与父容器相切（即靠拢）;
5. space-around： 定义所有子容器沿着主轴均匀分布，两边的空隙为子容器间距的一半;

flex-start;
flex-end
center
space-between
space-around

2. align-items（定义子容器在Flex容器中在交叉轴的排列方式）

.test {
    display: flex;
    justify-content: center;
    align-items: flex-start;
}

【align-items】： flex-start、flex-end、center、baseline、stretch（default)
1. flex-start： 定义所有子容器沿着交叉轴的起始端对齐;
2. flex-end： 定义所有子容器沿着交叉轴的结束端对齐;
3. center： 定义所有子容器沿着交叉轴居中对齐;
4. baseline： 定义所有子容器沿着交叉轴的baseline对齐, 根据元素中文字对齐;
5. stretch： 定义子容器拉伸覆盖整个交叉轴，直到填充所有空间;

flex-start
flex-end
center
baseline???
stretch???

3. align-self（定义元素自身在父元素为flex布局时，自己在交叉轴的排列对齐方式）

.test-container {
    display: flex;
    justify-content: center;
    align-items: center;
}
.test {
    align-self: stretch;

【align-self】：auto,  flex-start、flex-end、center、baseline, stretch
1. auto,  flex-start、flex-end、center、stretch
2. baseline 目标元素的文字在交叉轴与基线对齐（文字整体在基线上方，别的都是文字被基线一分为二）

4.flex-direction

定义元素在flex容器中的排序方式，用于控制元素是按主轴/交叉轴排序，同时顺序/逆序）

.test{
    display: flex;
    flex-direction: row/row-reverse/column/column-reverse
}

5.flex-basis属性

定义弹性盒模型的初始化大小（auto: 元素会自动调增大小，使元素的内容完整的展示）

.test{
    display: flex;
    flex-basis: auto(default)/px/rem/em/...
}

6.flex-wrap属性

定义元素在flex容器中是否换行

.test{
    display: flex;
    max-width: 360px;
    flex-wrap: wrap-reverse/nowrap/wrap
}

1. nowrap: 元素始终单行（超过溢出，文字会换行显示）
2. wrap： 若容器宽度不够，则换行
3. wrap-reverse： 分布多行，溢出的行位于上面

7.align-content属性

定义flex容器中每一行的对齐方式（已经领悟，千万别忘了）

该属性仅当预先设置了flex-wrap: wrap后有效，且flexbox的子元素有多行时。

.test{
    display: flex;
    height: 300px;
    flex-wrap: wrap;
    align-content: stretch(default)/flex-start/flex-end/center/space-between/space-around)
}

以align-content: stretch为例： 
flex容器高300px; 
假如第一行三个元素，高分别为，50px, 100px, 50px;
假如第二行两个元素，高分别为， 50px, 50px；
那么最终第一行高： 175px; 第二行高125px；分析如下：
：
第一行最初高度为100px（以最高元素为准），第二行高50px； 
那么flex容器剩下150px的余量。
由于选择stretch对齐方式，因此两行再平分75px。

8.flex-grow属性

定义元素有可用空间时如何占用

.test-container{
    display: flex,
    flex-grow: 0
}
.test {
    flex-grow: 1
}
所有元素因为容器flex-grow:0，先默认占据实际所需空间，
测试元素因为flex-grow:1，且没有其余元素设置flex-grow的值，因此该测试元素占据所有剩下的空间

'0' 表示元素不占用剩余空间，仅占自身所需空间;
'1' 表示元素将占用扩展因子1
'2' 表示元素将占用扩展因子2

.test-container{
    display: flex,
    flex-grow: 0
}
.test_1 {
    flex-grow: 1
}
.test_2 {
    flex-grow: 2
}
未设置flex-grow的所有元素按照自身大小；
剩余空间按扩展因子分配：test_1分剩余空间的1/3；test_2分剩余空间的2/3

9.flex-shrink属性

定义元素没有足够的空间时，如何压缩自身。

.test{
    display: flex;
    width: 360px;
    flex-shrink: 1
}

默认的属性为'1',定义了当主轴不够时，元素将按照压缩因子1来压缩，这将导致元素换行（折叠）显示自身内容

.test-container{
    display: flex;
    width: 360px;
    flex-shrink: 1
}
.test_1 {
    flex-shrink: 0
}

属性0表示元素不压缩；由于父元素设置了flex-shrink，因此其余子元素可能超出容器的外部；
当多个元素设置了flex-shrink，则等比例压缩即可

10. order属性

order属性定义了元素在容器中的排序位置，可使用任何整数（正负0）