参考：
flex 布局的基本概念 - CSS：层叠样式表 | MDN (mozilla.org)
flex布局 - 简书 (jianshu.com)

这是总结关键字

首先Flex要明白有主轴、交叉轴

默认横向主轴，竖向交叉轴

默认横向主轴

竖向交叉轴竖向交叉轴

Flex 容器

image.png

          .box {
            display: flex;
          }

        <div class="box">
          <div>One</div>
          <div>Two</div>
          <div>Three
              <br>has
              <br>extra
              <br>text
          </div>
        </div>

更改 flex 方向 flex-direction

image.png

        .box {
          display: flex;
          flex-direction: row-reverse;
        }
        <div class="box">
          <div>One</div>
          <div>Two</div>
          <div>Three</div>
        </div>

竖向 flex-direction

image.png

flex-direction: column; 

用 flex-wrap 实现多行 Flex 容器

image.png

      .box {
        display: flex;
        flex-wrap: wrap;
    }
      <div class="box">
        <div>One</div>
        <div>Two</div>
        <div>Three</div>
      </div>

简写属性 flex-flow 支持换行和模式

image.png

      .box {
        display: flex;
        flex-flow: row wrap;
      }
      <div class="box">
        <div>One</div>
        <div>Two</div>
        <div>Three</div>
      </div>

flex-grow 占比模式

通过占比让所有元素分别占据不同占比

image.png

flex-shrink 缩小占比模式

        #content {
            display: flex;
            width: 500px;
        }

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

        .box {
            flex-shrink: 3;
        }

        .box1 {
            flex-shrink: 1;
        }

    <p>整个宽度为500px,而每个div 120px,当5个div的总宽度超过500px后,通过占比划分不同宽度,占比越高,就缩小越多</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>

image.png

flex-basis 数值决定大小

.container {
  font-family: arial, sans-serif;
  margin: 0;
  padding: 0;
  list-style-type: none;
  display: flex;
  flex-wrap: wrap;
}

.flex {
  background: #6AB6D8;
  padding: 10px;
  margin-bottom: 50px;
  border: 3px solid #2E86BB;
  color: white;
  font-size: 20px;
  text-align: center;
  position: relative;
}

.flex:after {
  position: absolute;
  z-index: 1;
  left: 0;
  top: 100%;
  margin-top: 10px;
  width: 100%;
  color: #333;
  font-size: 18px;
}

.flex1 {
  flex-basis: auto;
}

.flex1:after {
  content: 'auto';
}

.flex2 {
  flex-basis: max-content;
}

.flex2:after {
  content: 'max-content';
}

.flex3 {
  flex-basis: min-content;
}

.flex3:after {
  content: 'min-content';
}

.flex4 {
  flex-basis: fit-content;
}

.flex4:after {
  content: 'fit-content';
}

.flex5 {
   flex-basis: content;
}

.flex5:after {
  content: 'content';
}

.flex6 {
  flex-basis: fill;
}

.flex6:after {
  content: 'fill/-webkit-fill-available/-moz-available';
}

<ul class="container">
  <li class="flex flex1">1: flex-basis test</li>
  <li class="flex flex2">2: flex-basis test</li>
  <li class="flex flex3">3: flex-basis test</li>
  <li class="flex flex4">4: flex-basis test</li>
  <li class="flex flex5">5: flex-basis test</li>
</ul>

<ul class="container">
  <li class="flex flex6">6: flex-basis test</li>
</ul>

image.png

flex-basis有不同属性作用：

• flex-basis: auto; 参照我的width和height属性
• flex-basis: max-content; 内容有多宽，盒子就有多宽，不会顾及父级盒子有多宽，只满足自己的需求
• flex-basis: min-content; 装下单个最大内容的最小宽度，中文是一个，英文是一个单词
• flex-basis: fit-content; 在不超过父级盒子宽度的情况下，尽量撑开盒子满足自己的需求
• flex-basis: content; content代表自动尺寸
• flex-basis: 0; 0比min占用的空间更少
• flex-basis: 200px; 200px的空间

Flex 属性的简写

      .box {
        display: flex;
      }

      .one {
        flex: 1 1 auto;
      }

      .two {
        flex: 1 1 auto;
      }

      .three {
        flex: 1 1 auto;
      }
      <div class="box">
        <div class="one">One</div>
        <div class="two">Two</div>
        <div class="three">Three</div>
      </div>

image.png

Flex 简写形式允许你把三个数值按这个顺序书写 — flex-grow，flex-shrink，flex-basis。

• flex-grow。赋值为正数的话是让元素增加所占空间
• flex-shrink — 正数可以让它缩小所占空间，但是只有在 flex 元素总和超出主轴才会生效
• flex-basis；flex 元素是在这个基准值的基础上缩放的。

以下几种模式更加简写

• flex: initial = flex: 0 1 auto
• flex: auto = flex: 1 1 auto
• flex: none = flex: 0 0 auto
• flex: <positive-number> = flex: number 1 0

align-items

          .box {
            display: flex;
            align-items: flex-start;
          }
        <div class="box">
          <div>One</div>
          <div>Two</div>
          <div>Three
              <br>has
              <br>extra
              <br>text
          </div>
        </div>

image.png

• stretch：铺满交叉轴，根据内容铺满
• flex-start：交叉轴如果是竖向，就居上，也是默认值
• flex-end: 交叉轴如果是竖向，就居下
• center： 交叉轴如果是竖向，就上下居中

justify-content

          .box {
            display: flex;
            justify-content: space-between;
          }
        <div class="box">
          <div>One</div>
          <div>Two</div>
          <div>Three</div>
        </div>

image.png

• stretch：铺满主轴，根据内容铺满
• flex-start：主轴如果是横向，就居左，也是默认值
• flex-end: 主轴如果是横向，就居右
• center： 主轴如果是横向，就左右居中
• space-around：主轴如果是横向，就左右以平衡的方式分散
• space-between：主轴如果是横向，就左右以平衡的方式分散，但是最左边跟最右边的两个控件是靠边的

控制对齐的属性

        .box {
            width: 1000px;
            height: 1000px;
            display: flex;
            align-items: center;
            justify-content: center;
        }

        .box div {
            width: 100px;
            height: 100px;
        }

image.png

• justify-content - 控制主轴（横轴）上所有 flex 项目的对齐。
• align-items - 控制交叉轴（纵轴）上所有 flex 项目的对齐。
• align-self - 控制交叉轴（纵轴）上的单个 flex 项目的对齐。
• align-content - 控制“多条主轴”的 flex 项目在交叉轴的对齐。