CSS3 入門詳解（二）

時間 2019-11-08

標籤 css3 css 入門詳解欄目 CSS 简体版

原文原文鏈接

11. 動畫

動畫是 CSS3中具備顛覆性的特徵之一，可經過設置多個節點來精確控制一個或一組動畫，經常使用來實現複雜的動畫效果。

11.1 如何實現動畫

必要元素：css

a、經過@keyframes指定動畫序列；
b、經過百分比將動畫序列分割成多個節點；
c、在各節點中分別定義各屬性
d、經過animation將動畫應用於相應元素；

示例代碼： 兩種定義動畫的方式html

<style>
    /* move 是定義的動畫名 */
    @keyframes move {
        0% {
            transform: translateX(0px);
            width: 200px;
            height: 200px;
        }
        
        40% {
            width: 300px;
            height: 300px;
        }
        
        80% {
            width: 200px;
            height: 200px;
            transform: translateX(100px);
        }
        
        100% {
            transform: translateX(0px);
            width: 200px;
            height: 200px;
        }
    }
    
    /* 定義動畫集 */
    @keyframes  move1 {
        from {
            /* 動畫的開始狀態 */
            /* 位置開始狀態 */
            transform: translateX(0px);
        }
        to {
            /* 動畫的結束狀態 */
            /* 位置結束狀態 */
            transform: translateX(300px);
        }
    }
    
    .box {
        width: 200px;
        height: 200px;
        background-color: pink;
        
        /* 調用動畫集 動畫名 持續時間 執行速度 */
        animation: move 5s linear;
    }
</style>

11.2 動畫關鍵屬性

關鍵屬性web

a、animation-name設置動畫序列名稱
b、animation-duration動畫持續時間
c、animation-delay動畫延時時間
d、animation-timing-function動畫執行速度，linear、ease等
e、animation-play-state動畫播放狀態，running、paused等
f、animation-direction動畫逆播，alternate等
g、animation-fill-mode動畫執行完畢後狀態，forwards、backwards等
h、animation-iteration-count動畫執行次數，inifinate等
i、steps(60)表示動畫分紅60步完成

參數值的順序：瀏覽器

關於幾個值，除了名字，動畫時間，延時有嚴格順序要求其它隨意。佈局

示例代碼：學習

<style type="text/css">
    .box {
        width: 200px;
        height: 200px;
        background-color: pink;
        /* 調用動畫集 */
        animation: move 5s linear;
    }
    
    /* 定義動畫集 */
    @keyframes move {
        0% {
            /* 位置開始狀態 */
            transform: translateX(0px);
            /* 動畫的開始狀態 */
            width: 100px;
            height: 100px;
        }
        40% {
            width: 150px;
            height: 150px;
            background: orange；
        }
        80% {
            width: 200px;
            height: 200px;
            background: cyan;
            transform: translateX(100px);
        }
        100% {
            /* 位置結束狀態 */
            transform: translateX(0px);
            /* 動畫的結束狀態 */
            width: 100px;
            height: 100px;
            background: pink;
        }
    }
</style>

<div class="box"></div>

效果圖：flex

11.3 動畫案例

一、全屏切換動畫

定義三個動畫集，當點擊 a標籤的時候，經過他的錨點觸發對應的動畫集。

<style type="text/css">
    * {
         margin: 0;
         padding: 0;
    }
    html,body {
         width: 100%;
         height: 100%;
    }

    .box {
         width: 100%;
         height: 100%;
         position: relative;
         overflow: hidden;
    }

    .box>div{
         width: 100%;
         height: 100%;
         position: absolute;
         background-size: cover;
    }

    .one {
         background: url(img/bg6.jpg) no-repeat;

    }

    .two {
        background: url(img/bg7.jpg) no-repeat;
    }

    .three {
         background: url(img/bg8.jpg) no-repeat;
    }

    .box .numbers {
         width: 150px;
         height: 40px;
         left: 50%;
         margin-left: -75px;
         bottom: 30px;
         z-index: 4;
    }

    .box .numbers a {
          width: 40px;
          height: 40px;
          display: block;
          line-height: 40px;
          text-align: center;
          text-decoration: none;
          color: #777;
          background-color: rgba(255,255,255,.8);
          border-radius: 50%;
          float: left;
          margin: 0 5px;
    }
    .one:target {
         animation: move 1s linear;
         z-index: 1;

    }

    .two:target {
         animation: rotate 1s linear;
         z-index: 1;
    }

    .three:target {
         animation: scale 1s linear;
         z-index: 1;
    }

    @keyframes move {
         from {
              transform: translateX(-100%);
         }

         to {
             transform: translateX(0px);
         }
    }
    @keyframes rotate {
         from {
              transform: scale(0) rotateZ(0deg);
         }

         to {
            transform: scale(1) rotateZ(360deg);
         }
    }
    @keyframes scale {
        from {
            transform: scale(0);
        }

        to {
            transform: scale(1);
        }
    }
</style>

<div class="box">
   <div class="one" id="one"></div>
   <div class="two" id="two"></div>
   <div class="three" id="three"></div>

   <div class="numbers">
        <a href="#one">1</a>
        <a href="#two">2</a>
        <a href="#three">3</a>
   </div>
</div>

效果圖：ui

二、大海波濤url

波浪實際上是兩張圖片，執行的是同一組動畫，只須要在第二張圖片執行動畫的時候，讓它延遲 1s執行，就能夠出現「波動」的感受。

<style type="text/css">
    * {
        margin: 0;
        padding: 0;
    }

    html,body {
        width: 100%;
        height: 100%;
    }
    .box {
         width: 100%;
         height: 100%;
         background-color: #0EA9B1;
         position: relative;
         overflow: hidden;
    }

    .box img {
         position: absolute;
         width: 100%;
         bottom: 0;
    }

    .sun {
         width: 80px;
         height: 80px;
         background-color: #fff;
         border-radius: 50%;
         position: absolute;
         left: 100px;
         top: 50px;
    }
    .sun:after {
         content: "";
         display: block;
         width: 100px;
         height: 100px;
         border-radius: 50%;
         background-color: rgba(255,255,255,.6);
         position: absolute;
         left: 50%;
         top: 50%;
         margin-left: -50px;
         margin-top: -50px;
         animation: scale 1s linear infinite alternate;
    }

    .sun:before {
        content: "";
        display: block;
        width: 120px;
        height: 120px;
        border-radius: 50%;
        background-color: rgba(255,255,255,.4);
        position: absolute;
        left: 50%;
        top: 50%;
        margin-left: -60px;
        margin-top: -60px;
        animation: scale 2s 1s linear infinite alternate;
    }

    @keyframes scale {
        from {
            transform: scale(1);
        }

        to {
            transform: scale(1.2);
        }
    }

    @keyframes move{
         from {
              bottom: 0px;
         }

         to {
              bottom: -60px;
         }
    }

    img:nth-child(2){
         animation: move 1s linear infinite alternate;
    }

    img:nth-child(3) {
         animation: move 2s 1s linear infinite alternate;
    }
</style>

 <div class="box">
       <div class="sun"></div>
       <img src="img/1.png" alt="">
       <img src="img/2.png" alt="">
 </div>

效果圖：

三、宇宙

經過定位肯定各「星球」的位置，再對每一個星球設定單獨的動畫，造成聯動的各大星球。

<style type="text/css">
    * {
        margin: 0;
        padding: 0;
    }
    html,body {
         width: 100%;
         height: 100%;
         background: url(img/bg.jpg) no-repeat;
         background-size: cover;
         position: relative;
    }
    .box {
        width: 600px;
        height: 600px;
        border: 1px solid #ccc;
        border-radius: 50%;
        position: absolute; 
        left: 50%;
        margin-left: -300px;
        top: 50%;
        margin-top: -300px;
    }

    .sun {
         position: absolute;
         width: 50px;
         height: 50px;
         background-color: orange;
         border-radius: 50%;
         margin-left: -25px;
         left: 50%;
         margin-top: -25px;
         top: 50%;

         box-shadow: 0px 0px 50px orange;
    }

    .lin1 {
         width: 100px;
         height: 100px;
         border: 1px solid #ccc;
         border-radius: 50%;
         margin-left: -50px;
         margin-top: -50px;
         animation: rotate 10s linear infinite;
    }

    .lin1:after {
         content: "";
         width: 20px;
         height: 20px;
         display: block;
         border-radius: 50%;
         background-color: orange;
         position: absolute;
         left: -2px;
         top: 10px;
    }

    .public {
         position: absolute;
         left: 50%;
         top: 50%;
    }




    @keyframes rotate {
         from {
            transform: rotateZ(0deg);
         }

         to {
              transform: rotateZ(360deg);
         }
    }

    .lin2 {
         width: 150px;
         height: 150px;
         border: 1px solid #ccc;
         border-radius: 50%;
         margin-left: -75px;
         margin-top: -75px;

         animation: rotate 5s linear infinite;
    }
    .lin2:after {
        content: "";
        width: 10px;
        height: 10px;
        background-color: blue;
        display: block;
        border-radius: 50%;
        position: absolute;
        left: 25px;
        top: 10px;
    }

    .lin3 {
         width: 230px;
         height: 230px;
         border: 1px solid #ccc;
         border-radius: 50%;
         margin-left: -115px;
         margin-top: -115px;
         animation:  rotate 10s linear infinite;
    }
    .lin3 span {
         width: 20px;
         height: 20px;
         display: block;
         background-color: green;
         border-radius: 50%;
         position: absolute;
         left: 50px;
         animation: rotate 5s linear infinite;
    }
    .lin3 span b {
         width: 10px;
         height: 10px;
         background-color: pink;
         display: block;
         border-radius: 50%;
         position: absolute;
         left: 25px;

    }

    .lin4  {
         width: 332px;
         height: 332px;
         border: 1px solid #ccc;
         background: url(img/asteroids_meteorids.png) no-repeat;
         border-radius: 50%;
         margin-left: -161px;
         margin-top: -161px;
         animation: rotate 15s linear infinite;
    }

    .lin4:after {
         content: "";
         display: block;
         width: 10px;
         height: 10px;
         background-color: red;
         border-radius: 50%;
         position: absolute;
         left: 120px;
    }

    .line5 {
         width: 450px;
         height: 450px;
         border: 1px solid #ccc;
         border-radius: 50%;
         margin-left: -220px;
         margin-top: -220px;
         animation: rotate 10s linear infinite;
    }

    .line5 span {
         width: 30px;
         height: 30px;
         background-color: blue;
         border-radius: 50%;
         display: block;
         position: absolute;
         left: 120px;
    }

    .line5 span  b {
         display: block;
         width: 40px;
         height: 40px;
         border: 5px solid #ccc;
         border-radius: 50%;
         transform: skew(45deg);
         position: absolute;
         left: -6px;
         top: -10px;
    }
</style>

            
<div class="box">
      <div class="sun"></div>
      <div class="lin1 public"></div>
      <div class="lin2 public"></div>
      <div class="lin3 public">
            <span>
                  <b></b>
            </span>
      </div>

      <div class="lin4 public"></div>

      <div class="line5 public">
             <span>
                   <b></b>
             </span>
      </div>

</div>

效果圖：

四、無縫滾動輪播

結構上與普通的輪播圖沒有什麼區別，定義一個盒子的寬度，寬度爲八張圖片的總寬度，定義一個動畫集， 10s內將 ul從 0的位置移動到盒子的寬度，此時動畫集結束，應該是跳到 0的位置，循環此動畫就會造成無縫滾動。之因此 ul下的 li定義的是十四張圖片，是由於，一開始的時候圖片從零的位置向右移動時，若是隻有七張圖片的時候，右邊是空白的，只有徹底到達盒子寬的時候，整個圖片纔會顯示完整，用戶體驗不好，因此須要用到障眼法，就是用 14張圖片。

<style type="text/css">
    
     * {
         margin: 0;
         padding: 0;
         list-style: none;
     }

     .box {
          width: 882px;
          height: 84px;
          border: 1px solid #ccc;
          margin: 50px auto;
          overflow: hidden;
     }
     ul {
          width: 1764px;
          height: 84px;
          float: right;
          animation: move 10s linear infinite;
     }
     li {
         float: left;
     }

     ul:hover {
          animation-play-state: paused;
     }

     @keyframes move {
          from {
              transform: translateX(0px);
          }

          to {
              transform: translateX(882px);
          }
     }
</style>


<div class="box">
   <ul>
       <li><img src="img/1.jpg" alt=""></li>
       <li><img src="img/2.jpg" alt=""></li>
       <li><img src="img/3.jpg" alt=""></li>
       <li><img src="img/4.jpg" alt=""></li>
       <li><img src="img/5.jpg" alt=""></li>
       <li><img src="img/6.jpg" alt=""></li>
       <li><img src="img/7.jpg" alt=""></li>
       <li><img src="img/1.jpg" alt=""></li>
       <li><img src="img/2.jpg" alt=""></li>
       <li><img src="img/3.jpg" alt=""></li>
       <li><img src="img/4.jpg" alt=""></li>
       <li><img src="img/5.jpg" alt=""></li>
       <li><img src="img/6.jpg" alt=""></li>
       <li><img src="img/7.jpg" alt=""></li>
   </ul>
</div>

效果圖：

五、進度條

前面已經接觸了一個 demo，只不過是一個靜態的進度條，如今咱們經過動畫，讓他動起來。

<style type="text/css">
     * {
          margin: 0;
          padding: 0;
     }

     html,body {
          width: 100%;
          height: 100%;
          background-color: #ccc;
     }

     .line {
          width: 980px;
          height: 40px;
          margin: 50px auto;
          border-radius: 10px;
        
         background-image: linear-gradient(
              135deg,
              #fff 25%,
              #000 25%,
              #000 50%,
              #fff 50%,
              #fff 75%,
              #000 75%,
              #000 
         );
         background-size: 40px 40px;
         animation: move 2s linear infinite;
     }

     @keyframes move {
          from {
              background-position: 0px;
          }

          to {
             background-position: 40px;
          }
     }

</style>


<div class="line"></div>

效果圖：

六、時鐘案例

本時鐘案例，主要是依賴CSS3中動畫以及旋轉的概念實現的。

<style type="text/css">
    
     * {
          margin: 0;
          padding: 0;
     }
     body{
         background: #ccc;
     }
     .box {
          width: 300px;
          height: 300px;
          border: 1px solid #fff;
          margin: 100px auto;
          border-radius: 50%;
          position: relative;
     }

     .line {
          position: absolute;
          left: 50%;
          margin-left: -1px;
          height: 100%;
          width: 2px;
          background-color: #fff;
     }
     .line:nth-child(1){

     }
     /* 設置時刻位置的刻度線 */
     .line:nth-child(2) {
          transform: rotateZ(30deg);
     }

     .line:nth-child(3) {
          transform: rotateZ(60deg);
     }

     .line:nth-child(4) {
          transform: rotateZ(90deg);
     }

     .line:nth-child(5) {
          transform: rotateZ(120deg);
     }

     .line:nth-child(6) {
          transform: rotateZ(-30deg);
     }

     .cover {
          position: absolute;
          left: 50%;
          top: 50%;
          margin-left: -140px;
          margin-top: -140px;
          width: 280px;
          height: 280px;
          background-color: #fff;
          border-radius: 50%;
     }
     
     /* 設置時針轉完一圈所要用的時間爲 43200s  */
     .h{
          width: 6px;
          height: 100px;
          background-color: #000;
          position: absolute;
          left: 50%;
          top: 40px;
          margin-left: -3px;
          animation: rotate 43200s linear infinite;
     }
     /* 設置分針轉完一圈所要用的時間爲 3600s  */
     .m {
          width: 4px;
          height: 120px;
          background-color: #000;
          position: absolute;
          left: 50%;
          top: 20px;
          margin-left: -2px;
          transform-origin: bottom;
          animation: rotate 3600s linear infinite;
     }
     /* 設置秒針轉完一圈所要用的時間爲 60s   */
     /* steps(60) 表示該動畫須要60步完成 */
     .s {
          width: 2px;
          height: 130px;
          background-color: orange;
          position: absolute;
          left: 50%;
          top: 10px;
          margin-left: -1px;
         transform-origin: bottom;
          animation: rotate 60s steps(60) infinite;
     }

     .dotted {
          width: 10px;
          height: 10px;
          background-color: #000;
          border-radius: 50%;
          position: absolute;
          left: 50%;
          top: 50%;
          margin-left: -5px;
          margin-top: -5px;
     }

     /* 定義旋轉角度動畫，從0 度旋轉到 360度 */
     @keyframes rotate {
          from {
              transform: rotateZ(0deg);
          }

          to {
              transform: rotateZ(360deg);
          }
     }


</style>


<div class="box">
    <div class="line"></div>
    <div class="line"></div>
    <div class="line"></div>
    <div class="line"></div>
    <div class="line"></div>
    <div class="line"></div>
    <div class="cover">
        <div class="h"></div>
        <div class="m"></div>
        <div class="s"></div>
        <div class="dotted"></div>
    </div>
</div>

效果圖：

七、魔方案例

<style type="text/css">
    * {
       margin: 0;
       padding: 0;
       list-style: none;
    }
    
    .box {
       width: 400px;
       height: 400px;
       margin: 150px auto;
    
       /* perspective: 1000px; */
    
       transform-style: preserve-3d;
    
       animation: rotate  5s linear infinite alternate;
    }
    
    .box>div {
       position: absolute;
       width: 100%;
       height: 100%;
    }
    
    .left {
       background-color: transparent;
       transform: rotateY(-90deg) translateZ(200px);
    }
    
    .right {
       background-color: transparent;
       transform: rotateY(90deg) translateZ(200px);
    }
    
    .top {
       background-color: transparent;
       transform:  rotateX(90deg)  translateZ(200px);
    }
    
    .bottom {
       background-color: transparent;
       transform: rotateX(-90deg) translateZ(200px);
    }
    
    .before {
      background-color: transparent;
        transform: translateZ(200px);
    
    }
    
    .back {
       transform: translateZ(-200px);
       background-color: transparent;
    }
    
    
    @keyframes rotate {
       0% {
       transform: rotateY(0deg)  rotateX(0deg) rotateZ(0deg);
       }
    
       50% {
        transform: rotateY(30deg)  rotateX(60deg) rotateZ(45deg);
       }
    
       75% {
           transform: rotateY(80deg)  rotateX(-60deg) rotateZ(-45deg);
       }
    
       100% {
        transform: rotateY(-45deg)  rotateX(50deg) rotateZ(-35deg);
       }
    }
    
    
    li {
       width: 120px;
       height: 120px;
       background-color: green;
       float: left;
       margin-left: 10px;
       margin-top: 10px;
       text-align: center;
       line-height: 120px;
       font-size: 50px;
       border-radius: 10px;
    }
    
    .left li {
       background-color: orange;
    }
    
    .right li {
       background-color: pink;
    }
    
    .top li {
       background-color: red;
    }
    
    .bottom li {
       background-color: yellow;
    }
    
    .back li {
       background-color: orangered;
    }
</style>


<div class="box">
    <div class="left">
        <ul>
            <li>1</li>
            <li>2</li>
            <li>3</li>
            <li>4</li>
            <li>5</li>
            <li>6</li>
            <li>7</li>
            <li>8</li>
            <li>9</li>
        </ul>
    </div>
    <div class="right">
        <ul>
            <li>1</li>
            <li>2</li>
            <li>3</li>
            <li>4</li>
            <li>5</li>
            <li>6</li>
            <li>7</li>
            <li>8</li>
            <li>9</li>
        </ul>
    </div>
    <div class="top">
        <ul>
            <li>1</li>
            <li>2</li>
            <li>3</li>
            <li>4</li>
            <li>5</li>
            <li>6</li>
            <li>7</li>
            <li>8</li>
            <li>9</li>
        </ul>
    </div>
    <div class="bottom">
        <ul>
            <li>1</li>
            <li>2</li>
            <li>3</li>
            <li>4</li>
            <li>5</li>
            <li>6</li>
            <li>7</li>
            <li>8</li>
            <li>9</li>
        </ul>
    </div>
    <div class="before">
        <ul>
            <li>1</li>
            <li>2</li>
            <li>3</li>
            <li>4</li>
            <li>5</li>
            <li>6</li>
            <li>7</li>
            <li>8</li>
            <li>9</li>
        </ul>
    </div>
    <div class="back">
        <ul>
            <li>1</li>
            <li>2</li>
            <li>3</li>
            <li>4</li>
            <li>5</li>
            <li>6</li>
            <li>7</li>
            <li>8</li>
            <li>9</li>
        </ul>
    </div>
</div>

效果圖：

12. 伸縮佈局

本章節摘自阮一峯老師的《Flex 佈局教程》

CSS3在佈局方面作了很是大的改進，使得咱們對塊級元素的佈局排列變得十分靈活，適應性很是強，其強大的伸縮性，在響應式開中能夠發揮極大的做用。伸縮佈局也叫彈性佈局或者 flex佈局。

12.1 什麼是伸縮佈局

Flex是 Flexible Box的縮寫，意爲"彈性佈局"，用來爲盒狀模型提供最大的靈活性。

任何一個容器均可以指定爲Flex佈局。

.box{
  display: flex;
}

行內元素也可使用Flex佈局。

.box{
  display: inline-flex;
}

Webkit內核的瀏覽器，必須加上-webkit前綴。

.box{
  display: -webkit-flex; /* Safari */
  display: flex;
}

注意，設爲Flex佈局之後，子元素的float、clear和vertical-align屬性將失效。

12.2 基本概念

瀏覽器兼容性：

學習幾個新概念：

主軸：Flex容器的主軸主要用來配置Flex項目，默認是水平方向
側軸：與主軸垂直的軸稱做側軸，默認是垂直方向的
方向：默認主軸從左向右，側軸默認從上到下
主軸和側軸並非固定不變的，經過flex-direction能夠互換。

12.3 flex-direction屬性

flex-direction屬性決定主軸的方向（即項目的排列方向）。

.box { flex-direction: row | row-reverse | column | column-reverse; }

參數說明：

row（默認值）：主軸爲水平方向，起點在左端。
row-reverse：主軸爲水平方向，起點在右端。
column：主軸爲垂直方向，起點在上沿。
column-reverse：主軸爲垂直方向，起點在下沿。

示例代碼：

<style>
    .block{
        width: 100%;
        border-radius: 15px;
        background: rgba(158,158,158,0.15);
        padding: 20px;
        box-sizing: border-box;
        margin-bottom: 20px;
    }
    .box{
        background: #fff;
        display: flex;
        margin: 0 0 55px;
    }
    .box-item {
        width: 150px;
        height: 150px;
        line-height: 150px;
        vertical-align: middle;
        margin: 5px;
        background-color: #ffd200;
        font-size: 100px;
        color: white;
        text-align: center;
    }
    .box-1-1 {
        flex-direction: row;
    }
    .box-1-2 {
        flex-direction: row-reverse;
    }
    .box-1-3 {
        flex-direction: column;
    }
    .box-1-4 {
        flex-direction: column-reverse;
    }
</style>

<div class="block">
    <h4>flex-direction: row 水平向右</h4>
    <div class="box box-1-1">
        <div class="box-item">1</div>
        <div class="box-item">2</div>
        <div class="box-item">3</div>
        <div class="box-item">4</div>
    </div>
</div>
<div class="block">
    <h4>flex-direction: row-reverse 水平向左</h4>
    <div class="box box-1-2">
        <div class="box-item">1</div>
        <div class="box-item">2</div>
        <div class="box-item">3</div>
        <div class="box-item">4</div>
    </div>
</div>
<div class="block">
    <h4>flex-direction: column 垂直向下</h4>
    <div class="box box-1-3">
        <div class="box-item">1</div>
        <div class="box-item">2</div>
        <div class="box-item">3</div>
        <div class="box-item">4</div>
    </div>
</div>
<div class="block">
    <h4>flex-direction: column-reverse 垂直向上</h4>
    <div class="box box-1-4">
        <div class="box-item">1</div>
        <div class="box-item">2</div>
        <div class="box-item">3</div>
        <div class="box-item">4</div>
    </div>
</div>

效果圖：

12.4 flex-wrap 屬性

默認狀況下，項目都排在一條線（又稱"軸線"）上。 flex-wrap屬性定義，若是一條軸線排不下，如何換行。

.box{
    flex-wrap: nowrap | wrap | wrap-reverse; 
}

參數說明：

nowrap（默認）：不換行，寬度自動適應；
wrap：換行，第一行在上方；
wrap-reverse：換行，第一行在下方

示例代碼：

<style>
    .block{
        width: 100%;
        border-radius: 15px;
        background: rgba(158,158,158,0.15);
        padding: 20px;
        box-sizing: border-box;
        margin-bottom: 20px;
    }
    .box{
        background: #fff;
        display: flex;
        margin: 0 0 55px;
    }
    .box-item {
        width: 150px;
        height: 150px;
        line-height: 150px;
        vertical-align: middle;
        margin: 5px;
        background-color: #ffd200;
        font-size: 100px;
        color: white;
        text-align: center;
    }
    .box-2-1 {
        flex-wrap: nowrap;
    }
    .box-2-2 {
        flex-wrap: wrap;
    }
    .box-2-3 {
        flex-wrap: wrap-reverse;
    }
    </style>

<div class="block">
    <h4>nowrap（默認）：不換行。</h4>
    <div class="box box-2-1">
        <div class="box-item">1</div>
        <div class="box-item">2</div>
        <div class="box-item">3</div>
        <div class="box-item">4</div>
        <div class="box-item">5</div>
        <div class="box-item">6</div>
        <div class="box-item">7</div>
    </div>
</div>
<div class="block">
    <h4>wrap：換行，第一行在上方。</h4>
    <div class="box box-2-2">
        <div class="box-item">1</div>
        <div class="box-item">2</div>
        <div class="box-item">3</div>
        <div class="box-item">4</div>
        <div class="box-item">5</div>
        <div class="box-item">6</div>
        <div class="box-item">7</div>
    </div>
</div>
<div class="block">
    <h4>wrap-reverse：換行，第一行在下方。</h4>
    <div class="box box-2-3">
        <div class="box-item">1</div>
        <div class="box-item">2</div>
        <div class="box-item">3</div>
        <div class="box-item">4</div>
        <div class="box-item">5</div>
        <div class="box-item">6</div>
        <div class="box-item">7</div>
    </div>
</div>

效果圖：

12.5 flex-flow 屬性

flex-flow屬性是 flex-direction屬性和 flex-wrap屬性的簡寫形式，默認值爲 row nowrap。

.box {
  flex-flow: <flex-direction> || <flex-wrap>;
}

示例代碼：

<style>
    .block{
        width: 100%;
        border-radius: 15px;
        background: rgba(158,158,158,0.15);
        padding: 20px;
        box-sizing: border-box;
        margin-bottom: 20px;
    }
    .box{
        background: #fff;
        display: flex;
        margin: 0 0 55px;
    }
    .box-item {
        width: 150px;
        height: 150px;
        line-height: 150px;
        vertical-align: middle;
        margin: 5px;
        background-color: #ffd200;
        font-size: 100px;
        color: white;
        text-align: center;
    }
    .box-3{
        flex-flow: row wrap;
    }
</style>

<div class="block">
    <h4>row nowrap（默認）：不換行。</h4>
    <div class="box box-3">
        <div class="box-item">1</div>
        <div class="box-item">2</div>
        <div class="box-item">3</div>
        <div class="box-item">4</div>
        <div class="box-item">5</div>
        <div class="box-item">6</div>
        <div class="box-item">7</div>
    </div>
</div>

效果圖：

12.6 justify-content 屬性

justify-content屬性定義了項目在主軸上的對齊方式。

.box {
  justify-content: flex-start | flex-end | center | space-between | space-around;
}

參數說明：

flex-start：（默認值）：左對齊
flex-end：右對齊
center：居中
space-between：兩端對齊，項目之間的間隔都相等。
space-around：每一個項目兩側的間隔相等。因此，項目之間的間隔比項目與邊框的間隔大一倍。

示例代碼：

<style>
    .block{
        width: 100%;
        border-radius: 15px;
        background: rgba(158,158,158,0.15);
        padding: 20px;
        box-sizing: border-box;
        margin-bottom: 20px;
    }
    .box{
        background: #fff;
        display: flex;
        margin: 0 0 55px;
    }
    .box-item {
        width: 150px;
        height: 150px;
        line-height: 150px;
        vertical-align: middle;
        margin: 5px;
        background-color: #ffd200;
        font-size: 100px;
        color: white;
        text-align: center;
    }
    .box-4-1{
        justify-content:flex-start;
    }
    .box-4-2{
        justify-content:flex-end;
    }
    .box-4-3{
        justify-content:center;
    }
    .box-4-4{
        justify-content:space-between;
    }
    .box-4-5{
        justify-content:space-around;
    }
</style>

<div class="block">
    <h4>flex-start（默認值）：左對齊</h4>
    <div class="box box-4-1">
        <div class="box-item">1</div>
        <div class="box-item">2</div>
        <div class="box-item">3</div>
        <div class="box-item">4</div>
    </div>
</div>
<div class="block">
    <h4>flex-end：右對齊</h4>
    <div class="box box-4-2">
        <div class="box-item">1</div>
        <div class="box-item">2</div>
        <div class="box-item">3</div>
        <div class="box-item">4</div>
    </div>
</div>
<div class="block">
    <h4>center： 居中</h4>
    <div class="box box-4-3">
        <div class="box-item">1</div>
        <div class="box-item">2</div>
        <div class="box-item">3</div>
        <div class="box-item">4</div>
    </div>
</div>
<div class="block">
    <h4>space-between：兩端對齊，項目之間的間隔都相等。</h4>
    <div class="box box-4-4">
        <div class="box-item">1</div>
        <div class="box-item">2</div>
        <div class="box-item">3</div>
        <div class="box-item">4</div>
    </div>
</div>
<div class="block">
    <h4>space-around：每一個項目兩側的間隔相等。因此，項目之間的間隔比項目與邊框的間隔大一倍。</h4>
    <div class="box box-4-5">
        <div class="box-item">1</div>
        <div class="box-item">2</div>
        <div class="box-item">3</div>
        <div class="box-item">4</div>
    </div>
</div>

效果圖：

12.7 align-items 屬性

align-items屬性定義項目在交叉軸上如何對齊。

.box {
  align-items: flex-start | flex-end | center | baseline | stretch;
}

參數說明：

flex-start：交叉軸的起點對齊。
flex-end：交叉軸的終點對齊。
center：交叉軸的中點對齊。
baseline: 項目的第一行文字的基線對齊。
stretch（默認值）：若是項目未設置高度或設爲auto，將佔滿整個容器的高度。

示例代碼：

<style>
    .block{
        width: 100%;
        border-radius: 15px;
        background: rgba(158,158,158,0.15);
        padding: 20px;
        box-sizing: border-box;
        margin-bottom: 20px;
    }
    .box{
        background: #fff;
        display: flex;
        margin: 0 0 55px;
    }
    .box-item {
        width: 150px;
        height: 150px;
        line-height: 150px;
        vertical-align: middle;
        margin: 5px;
        background-color: #ffd200;
        font-size: 100px;
        color: white;
        text-align: center;
    }
    .item-tall {
        height: 400px;
        line-height: 400px;
    }
    .box-5-1 {
        align-items: flex-start;
    }
    .box-5-2 {
        align-items: flex-end;
    }
    .box-5-3 {
        align-items: center;
    }
    .box-5-4{
        align-items: baseline;
    }
    .box-5-4 .box-item{
        font-size: 88px;
        line-height: initial;
        text-decoration: underline;
    }
    .box-5-4 .item-tall{
        font-size: 122px;
        line-height: initial;
    }
    .box-5-5 {
        align-items: stretch;
    }
    .box-5-5 .box-item {
        height: auto;
}
</style>

<div class="block">
    <h4>flex-start：交叉軸的起點對齊。</h4>
    <div class="box box-5-1">
        <div class="box-item">1</div>
        <div class="box-item item-tall">2</div>
        <div class="box-item">3</div>
        <div class="box-item item-tall">4</div>
    </div>
</div>
<div class="block">
    <h4>flex-end：交叉軸的終點對齊。</h4>
    <div class="box box-5-2">
        <div class="box-item">1</div>
        <div class="box-item item-tall">2</div>
        <div class="box-item">3</div>
        <div class="box-item item-tall">4</div>
    </div>
</div>
<div class="block">
    <h4>center：交叉軸的中點對齊。</h4>
    <div class="box box-5-3">
        <div class="box-item">1</div>
        <div class="box-item item-tall">2</div>
        <div class="box-item">3</div>
        <div class="box-item item-tall">4</div>
    </div>
</div>
<div class="block">
    <h4>baseline: 項目的第一行文字的基線對齊。</h4>
    <div class="box box-5-4 line">
        <div class="box-item">1</div>
        <div class="box-item item-tall">2</div>
        <div class="box-item">3</div>
        <div class="box-item item-tall">4</div>
    </div>
</div>
<div class="block">
    <h4>stretch（默認值）：若是項目未設置高度或設爲auto，將佔滿整個容器的高度。</h4>
    <div class="box box-5-5">
        <div class="box-item">1</div>
        <div class="box-item item-tall">2</div>
        <div class="box-item">3</div>
        <div class="box-item item-tall">4</div>
    </div>
</div>

效果圖：

12.8 align-content 屬性

align-content屬性定義了多根軸線的對齊方式。若是項目只有一根軸線，該屬性不起做用。

.box {
    align-content: flex-start | flex-end | center | space-between | space-around | stretch;
}

參數說明：

flex-start：與交叉軸的起點對齊。
flex-end：與交叉軸的終點對齊。
center：與交叉軸的中點對齊。
space-between：與交叉軸兩端對齊，軸線之間的間隔平均分佈。
space-around：每根軸線兩側的間隔都相等。因此，軸線之間的間隔比軸線與邊框的間隔大一倍。
stretch（默認值）：軸線佔滿整個交叉軸。

示例代碼：

<style>
    .box-tall {
        height: 800px;
    }
    .box-6-1 {
        flex-wrap: wrap;
        align-content: flex-start;
    }
    .box-6-2 {
        flex-wrap: wrap;
        align-content: flex-end;
    }
    .box-6-3 {
        flex-wrap: wrap;
        align-content: center;
    }
    .box-6-4 {
        flex-wrap: wrap;
        align-content: space-between
    }
    .box-6-5 {
        flex-wrap: wrap;
        align-content: space-around;
    }
    .box-6-6 {
        flex-wrap: wrap;
        align-content: stretch;
    }
    .box-6-6 .box-item {
        height: auto;
    }
</style>

<div class="block">
    <h4>flex-start：交叉軸的起點對齊。</h4>
    <div class="box box-tall box-6-1">
        <div class="box-item">1</div>
        <div class="box-item">2</div>
        <div class="box-item">3</div>
        <div class="box-item">4</div>
        <div class="box-item">5</div>
        <div class="box-item">6</div>
        <div class="box-item">7</div>
        <div class="box-item">8</div>
        <div class="box-item">9</div>
        <div class="box-item">10</div>
        <div class="box-item">11</div>
        <div class="box-item">12</div>
    </div>
</div>
<div class="block">
    <h4>flex-end：與交叉軸的終點對齊。</h4>
    <div class="box box-tall box-6-2">
        <div class="box-item">1</div>
        <div class="box-item">2</div>
        <div class="box-item">3</div>
        <div class="box-item">4</div>
        <div class="box-item">5</div>
        <div class="box-item">6</div>
        <div class="box-item">7</div>
        <div class="box-item">8</div>
        <div class="box-item">9</div>
        <div class="box-item">10</div>
        <div class="box-item">11</div>
        <div class="box-item">12</div>
    </div>
</div>
<div class="block">
    <h4>center：與交叉軸的中點對齊。</h4>
    <div class="box box-tall box-6-3">
        <div class="box-item">1</div>
        <div class="box-item">2</div>
        <div class="box-item">3</div>
        <div class="box-item">4</div>
        <div class="box-item">5</div>
        <div class="box-item">6</div>
        <div class="box-item">7</div>
        <div class="box-item">8</div>
        <div class="box-item">9</div>
        <div class="box-item">10</div>
        <div class="box-item">11</div>
        <div class="box-item">12</div>
    </div>
</div>
<div class="block">
    <h4>space-between：與交叉軸兩端對齊，軸線之間的間隔平均分佈。</h4>
    <div class="box box-tall box-6-4">
        <div class="box-item">1</div>
        <div class="box-item">2</div>
        <div class="box-item">3</div>
        <div class="box-item">4</div>
        <div class="box-item">5</div>
        <div class="box-item">6</div>
        <div class="box-item">7</div>
        <div class="box-item">8</div>
        <div class="box-item">9</div>
        <div class="box-item">10</div>
        <div class="box-item">11</div>
        <div class="box-item">12</div>
    </div>
</div>
<div class="block">
    <h4>space-around：每根軸線兩側的間隔都相等。因此，軸線之間的間隔比軸線與邊框的間隔大一倍。</h4>
    <div class="box box-tall box-6-5">
        <div class="box-item">1</div>
        <div class="box-item">2</div>
        <div class="box-item">3</div>
        <div class="box-item">4</div>
        <div class="box-item">5</div>
        <div class="box-item">6</div>
        <div class="box-item">7</div>
        <div class="box-item">8</div>
        <div class="box-item">9</div>
        <div class="box-item">10</div>
        <div class="box-item">11</div>
        <div class="box-item">12</div>
    </div>
</div>
<div class="block">
    <h4>stretch（默認值）：軸線佔滿整個交叉軸。</h4>
    <div class="box box-tall box-6-6">
        <div class="box-item">1</div>
        <div class="box-item">2</div>
        <div class="box-item">3</div>
        <div class="box-item">4</div>
        <div class="box-item">5</div>
        <div class="box-item">6</div>
        <div class="box-item">7</div>
        <div class="box-item">8</div>
        <div class="box-item">9</div>
        <div class="box-item">10</div>
        <div class="box-item">11</div>
        <div class="box-item">12</div>
    </div>
</div>

效果圖：

12.9 Order 屬性

order屬性定義項目的排列順序。數值越小，排列越靠前，默認爲 0。

.item {
    order: <integer>; 
}

參數說明：

order屬性值是一個數值，能夠是正數，也能夠是負數，在當前項目裏，數值越小，排列越靠前。

示例代碼：

<style>
    .box-7 .order {
        order: -1;
    }
    .box-7 .box-item div{
        font-size: 14px;
        position: relative;
        bottom: 90px;
        color: #9236f4;
    }
</style>

<div class="box box-7">
    <div class="box-item">1</div>
    <div class="box-item">2</div>
    <div class="box-item">3</div>
    <div class="box-item order">4 <div>(order:-1)</div></div>
</div>

效果圖：

12.10 flex-grow 屬性

flex-grow屬性定義項目的放大比例，默認爲 0，即若是存在剩餘空間，也不放大。

.item { 
    flex-grow: <number>; /* default 0 */ 
}

參數說明：

若是全部項目的flex-grow屬性都爲1，則它們將等分剩餘空間（若是有的話）。若是一個項目的flex-grow屬性爲2，其餘項目都爲1，則前者佔據的剩餘空間將比其餘項多一倍。

示例代碼：

<style>
    .box-8 .box-item div{
        font-size: 14px;
        position: relative;
        bottom: 90px;
        color: #9236f4;
    }
    .box-8 .grow{
        flex-grow: 1;
        width: auto;
    }
    .box-8    .grow-2 {
        flex-grow: 2;
    }
</style>

<div class="block">
    <div class="box box-8">
        <div class="box-item grow">1 <div>flex-grow: 1</div></div>
        <div class="box-item grow grow-2">2 <div>flex-grow: 2</div></div>
        <div class="box-item grow">3 <div>flex-grow: 1</div></div>
    </div>
</div>

效果圖：

12.11 flex-shrink 屬性

flex-shrink屬性定義了項目的縮小比例，默認爲 1，即若是空間不足，該項目將縮小。

.item {
    flex-shrink: <number>; /* default 1 */ 
}

參數說明：

若是全部項目的flex-shrink屬性都爲1，當空間不足時，都將等比例縮小。若是一個項目的flex-shrink屬性爲0，其餘項目都爲1，則空間不足時，前者不縮小。
負值對該屬性無效。

示例代碼：

<style>
    .box-9 .box-item div{
        font-size: 14px;
        position: relative;
        bottom: 90px;
        color: #9236f4;
    }
    .box-9 .box-item {
        width: 400px;
    }
    .box-9 .shrink{
        flex-shrink: 0;
    }
</style>

<div class="block">
    <div class="box box-9">
        <div class="box-item shrink">1 <div>flex-shrink: 0</div></div>
        <div class="box-item">2</div>
        <div class="box-item">3</div>
    </div>
</div>

效果圖：

12.12 flex-basis 屬性

flex-basis屬性定義了在分配多餘空間以前，項目佔據的主軸空間（ main-size）。瀏覽器根據這個屬性，計算主軸是否有多餘空間。它的默認值爲 auto，即項目的原本大小。

.item { 
    flex-basis: <length>; | auto; /* default auto */ 
}

示例代碼：

<style>
    .box-10 .box-item {
        flex-basis: 200px;
        width: 400px; /* width 將失去做用*/
    }
</style>

<div class="block">
    <h4></h4>
    <div class="box box-10">
        <div class="box-item">1</div>
        <div class="box-item">2</div>
        <div class="box-item">3</div>
    </div>
</div>

效果圖：

12.13 flex 屬性

flex屬性是 flex-grow, flex-shrink和 flex-basis的簡寫，默認值爲 0 1 auto。後兩個屬性可選。

該屬性有兩個快捷值：auto (1 1 auto) 和 none (0 0 auto)。

.item { 
    flex: none | [ <'flex-grow'> <'flex-shrink'>? || <'flex-basis'> ] 
}

12.14 align-self 屬性

align-self屬性容許單個項目有與其餘項目不同的對齊方式，可覆蓋 align-items屬性。默認值爲 auto，表示繼承父元素的 align-items屬性，若是沒有父元素，則等同於 stretch。

.item {
    align-self: auto | flex-start | flex-end | center | baseline | stretch;
}

參數說明：

auto：表示繼承父元素的align-items屬性，若是沒有父元素，則等同於stretch。
flex-start：交叉軸的起點對齊。
flex-end：交叉軸的終點對齊。
center：交叉軸的中點對齊。
baseline: 項目的第一行文字的基線對齊。
stretch（默認值）：若是項目未設置高度或設爲auto，將佔滿整個容器的高度。

示例代碼：

<style>
    .box-11 {
        height: 400px;
    }
    
    .box-11 .box-item {
        align-self: flex-start;
    }
    
    .box-11 .box-item div{
        font-size: 14px;
        position: relative;
        bottom: 90px;
        color: #9236f4;
    }
    
    .box-11 .end {
        align-self: flex-end;
    }
</style>

<div class="block">
    <h4>stretch（默認值）：軸線佔滿整個交叉軸。</h4>
    <div class="box box-11">
        <div class="box-item">1</div>
        <div class="box-item">2</div>
        <div class="box-item end">3<div>flex-end</div></div>
        <div class="box-item">4</div>
    </div>
</div>

效果圖：

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。