主要学习三个，重点一个
image.png
（重点）flex-shrink：控制子项在宽度超出容器宽度时的收缩比例。默认为1

1. flex 属性（非常重要）

image.png
通过份数，来指定需要自适应区域所占的大小，比如导航栏两边各自固定一个菜单按钮，然后让搜索框自适应的占有中间区域，此时就可以使用flex，非常好用，非常方便。
image.png

  1.     <p>子项flex属性</p>
  2.     <p>
  3.         <span>1</span>
  4.         <span>2</span>
  5.         <span>3</span>
  6.     </p>
  8.     <style>
  9.         p {
  10.             display: flex;
  11.             background-color: pink;
  12.             height: 500px;
  13.             width: 80%;
  14.         }
  16.         p span:nth-child(1),
  17.         p span:nth-child(3) {
  18.             height: 100px;
  19.             width: 100px;
  20.             background-color: rgb(206, 140, 236);
  21.         }
  23.         p span:nth-child(2) {
  24.             flex: 1;
  25.             background-color: aquamarine;
  26.             height: 100px;
  27.         }

常用于两边固定，中间自适应的导航栏，米哈游官网：
image.png
或者需要上下左右几等分的子盒子。

并且flex属性还能自适应宽度和高度，如果需要等分的话，子盒子甚至不需要设置宽高，只需要给每个子盒子设置flex:1即可。

2. align-self 控制子项自己在侧轴上的排列方式

可取值为：flex-start flex-end center baseline stretch
image.png
image.png

3.order 属性定义项目的排列顺序

order顾名思义就是排序的意思，子项目的默认排序就是标签书写的顺序，但是也可以通过order属性，使其不按照书写顺序排序。
image.png
让2号子盒子排在1号前：

        p span:nth-child(2) {
            background-color: aquamarine;
            height: 100px;
            /* order默认为0，-1比0小，所以排在前面*/
            order: -1;
        }

4.flex-shrink属性（重要）

当我们想让子元素占据一行的时候怎么办？我们直到flex子元素会平分容器的剩余空间（也就是每个子元素占1份），也就是说我们无法给子元素设置宽度，这个宽度是flex自己计算的。**当子元素的宽度和超过容器时，子元素的宽度会自动收缩，而这个收缩比例就是通过flex-shrink设置的。**<br />**如果设置为0则表示不收缩，每个子元素仍保持自己原本的宽度/高度。**

实例

A, B, C 设置 flex-shrink:1， D , E 设置为 flex-shrink:2：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
<style>
#content {
  display: flex;
  width: 500px;
}

#content div {
  flex-basis: 120px;
  border: 3px solid rgba(0,0,0,.2);
}

.box { 
  flex-shrink: 1;
}

.box1 { 
  flex-shrink: 2; 
}
</style>
</head>
<body>

<p>div 总宽度为 500px, flex-basic 为 120px。</p>
<p>A, B, C 设置 flex-shrink:1。 D , E 设置为 flex-shrink:2</p>
<p>D , E 宽度与 A, B, C 不同</p>
<div id="content">
  <div class="box" style="background-color:red;">A</div>
  <div class="box" style="background-color:lightblue;">B</div>
  <div class="box" style="background-color:yellow;">C</div>
  <div class="box1" style="background-color:brown;">D</div>
  <div class="box1" style="background-color:lightgreen;">E</div>
</div>
</body>
</html>

实例解析：
flex-shrink的默认值为1，如果没有显示定义该属性，将会自动按照默认值1在所有因子相加之后计算比率来进行空间收缩。
本例中A、B、C 显式定义了 flex-shrink 为 1，D、E 定义了 flex-shrink 为 2，所以计算出来总共将剩余空间分成了 7 份，其中 A、B、C 占 1 份，D、E 占 2 份，即1:1:1:2:2
我们可以看到父容器定义为 500px，子项被定义为 120px，子项相加之后即为 600 px，超出父容器 100px。那么超出的 100px 需要被 A、B、C、D、E 消化 通过收缩因子，所以加权综合可得 1001+1001+1001+1002+100*2=700px。
于是我们可以计算 A、B、C、D、E 将被移除的溢出量是多少：

  • A 被移除溢出量：(1001/700)100，即约等于14px
  • B 被移除溢出量：(1001/700)100，即约等于14px
  • C 被移除溢出量：(1001/700)100，即约等于14px
  • D 被移除溢出量：(1002/700)100，即约等于28px E 被移除溢出量：(1002/700)100，即约等于28px

最后A、B、C、D、E的实际宽度分别为：120-14=106px, 120-14=106px, 120-14=106px, 120-28=92px,120-28=92px，此外，这个宽度是包含边框的。