1、flex

  彈性盒子：當頁面需要適應不同的螢幕大小以及裝置型別時確保元素擁有恰當的行為的佈局方式。

  彈性盒子由**彈性容器**(Flex container)和**彈性子元素**(Flex item)組成

  **彈性容器**：簡單理解為 父元素，將父元素設定為display:flex或inline-flex。

2、屬性以及屬性值

** 水平對齊方式：justify-content 屬性**
1、flex-start:從頭開始對齊 （預設從頭對齊）
2、flex-end:從尾開始對齊
3、center：居中對齊
4、space-between：左右兩邊挨著邊框，中間對等分散。（之間留有空表）
5、space-around:各行之前、之間、之後都留有空白。（之前、之間、之後留有！）

  **彈性子元素在父容器中的位置：flex-direction屬性**
  1、row ：橫向從左到右排列（左對齊，預設）
  2、row-reverse:反轉橫向排列（右對齊，第一項在最右邊邊）
  3、column:縱向排列
  4、column-reverse:反轉縱向排列。

  **彈性盒子子元素換行方式：flex-wrap**
  1、nowrap:彈性容器為單行
  2、war 彈性容器為多行。該情況下彈性子項溢位的部分會被放置到新行，子項內部會發生斷行。
  

  **行對齊方式：align-items**
  **內容對齊方式：align-content**
    兩者都有三個值相同：flex-start、 flex-end、center。
  內容對齊方式還有：space-between、space-around 
 

3、漸變器

  <style>
          * {
              margin: 0;
              padding: 0;
              box-sizing: border-box;
          }

          body {
              display: flex;
              justify-content: center;
              align-items: center;
              /* min-width */
              min-width: 100vh;
              background: #000;
          }

          .loader {
              position: relative;
              width: 150px;
              height: 150px;
              border: 1px solid red;
              border-radius: 50%;
              margin-top: 200px;
              background: linear-gradient(45deg, transparent, transparent 40%, #e5f403);
              animation: animate 2s linear infinite;

          }

          @keyframes animate {
              from {
                  transform: rotate(0deg);
                  filter: hue-rotate(0deg);
               }

              to {
                  transform: rotate(360deg);
                  filter: hue-rotate(360deg);
              }
          }

          .loader::before {
              content: "";
              position: absolute;
              top: 10px;
              left: 6px;
              right: 6px;
              bottom: 6px;
              background: #000;
              border-radius: 50%;
              z-index: 3000;
          }

          .loader::after {
              content: "";
              position: absolute;
              background-color: aqua;
              top: 0px;
              left: 0px;
              right: 0px;
              bottom: 0px;
              background: linear-gradient(45deg, transparent, transparent 40%, #e5f403);
              border-radius: 50%;
              z-index: 1;
              filter: blur(30px);
          }
      </style>