參考：
flex 布局的基本概念 - CSS：層疊樣式表 | MDN (mozilla.org)
flex布局 - 簡書 (jianshu.com)

這是總結(jié)關(guān)鍵字

首先Flex要明白有主軸荔泳、交叉軸

默認(rèn)橫向主軸，豎向交叉軸

默認(rèn)橫向主軸

豎向交叉軸豎向交叉軸

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 實(shí)現(xiàn)多行 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 占比模式

通過占比讓所有元素分別占據(jù)不同占比

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>整個(gè)寬度為500px,而每個(gè)div 120px,當(dāng)5個(gè)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 數(shù)值決定大小

.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; 內(nèi)容有多寬虐杯，盒子就有多寬玛歌，不會(huì)顧及父級(jí)盒子有多寬，只滿足自己的需求
• flex-basis: min-content; 裝下單個(gè)最大內(nèi)容的最小寬度擎椰，中文是一個(gè)支子，英文是一個(gè)單詞
• flex-basis: fit-content; 在不超過父級(jí)盒子寬度的情況下，盡量撐開盒子滿足自己的需求
• flex-basis: content; content代表自動(dòng)尺寸
• 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 簡寫形式允許你把三個(gè)數(shù)值按這個(gè)順序書寫 — flex-grow达舒，flex-shrink值朋，flex-basis。

• flex-grow巩搏。賦值為正數(shù)的話是讓元素增加所占空間
• flex-shrink — 正數(shù)可以讓它縮小所占空間昨登，但是只有在 flex 元素總和超出主軸才會(huì)生效
• flex-basis；flex 元素是在這個(gè)基準(zhǔn)值的基礎(chǔ)上縮放的贯底。

以下幾種模式更加簡寫

• 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：鋪滿交叉軸，根據(jù)內(nèi)容鋪滿
• flex-start：交叉軸如果是豎向禽捆，就居上笙什，也是默認(rèn)值
• 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：鋪滿主軸，根據(jù)內(nèi)容鋪滿
• flex-start：主軸如果是橫向顿仇，就居左淘正，也是默認(rèn)值
• flex-end: 主軸如果是橫向摆马，就居右
• center： 主軸如果是橫向，就左右居中
• space-around：主軸如果是橫向鸿吆，就左右以平衡的方式分散
• space-between：主軸如果是橫向囤采，就左右以平衡的方式分散，但是最左邊跟最右邊的兩個(gè)控件是靠邊的

控制對(duì)齊的屬性

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

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

image.png

• justify-content - 控制主軸（橫軸）上所有 flex 項(xiàng)目的對(duì)齊惩淳。
• align-items - 控制交叉軸（縱軸）上所有 flex 項(xiàng)目的對(duì)齊蕉毯。
• align-self - 控制交叉軸（縱軸）上的單個(gè) flex 項(xiàng)目的對(duì)齊。
• align-content - 控制“多條主軸”的 flex 項(xiàng)目在交叉軸的對(duì)齊思犁。