css--flex彈性佈局詳解和使用

丶Serendipity丶發表於2021-06-27
CSSFlex

前言

　　前端開發最基礎的能力是根據 ui 設計稿迅速還原頁面，拿到設計稿不要急於寫程式碼，首先要對頁面進行分析，對頁面的整體佈局有個大概的瞭解，然後先實現一個整體的佈局，再把佈局拆分成逐個小模組，逐個去實現頁面效果，基於傳統的 float，div+css 等佈局的方法，這篇文章總結一下 flex 佈局在開發中使用。

正文

　　1.flex佈局屬性總結

　　flex 彈性佈局，首先需要給盒子設定 display:flex。下面總結一下具體的使用屬性。

　　（1）flex-direction 主軸方向屬性

    <style>
      .wrap {
        width: 400px;
        height: 100px;
        border: 1px solid red;
        display: flex;
      }
      .item {
        width: 100px;
        height: 100px;
        border: 1px solid black;
        background-color: pink;
      }
    </style>
    <body>
    <div class="wrap">
      <div class="item">1</div>
      <div class="item">2</div>
      <div class="item">3</div>
      <div class="item">4</div>
      <div class="item">5</div>
      <div class="item">6</div>
    </div>
  </body>

　　　　a. flex-direction: row; 該屬性使得子元素橫向在父元素盒子最左邊從左向右排列，當父盒子寬度不夠時會擠壓子元素的寬度。

 

    .wrap {
        width: 400px;
        height: 100px;
        border: 1px solid red;
        display: flex;
        flex-direction: row;
      }

 

 

 

　　　　b. flex-direction: column; 該屬性使得子元素縱向從父元素最上邊從上向下排列，當父盒子的高度不夠時會擠壓子元素的高度。

 

     .wrap {
        width: 400px;
        height: 100px;
        border: 1px solid red;
        display: flex;
        flex-direction: column;
      }

 

 

 

　　　　c. flex-direction: row-reverse;  該屬性使得子元素橫向從父元素最右邊從右向左排列，當父盒子寬度不夠時會擠壓子元素的寬度。

 

     .wrap {
        width: 400px;
        height: 100px;
        border: 1px solid red;
        display: flex;
        flex-direction: row-reverse;
      }

 

 

 

　　　　d. flex-direction: column-reverse; 該屬性使得子元素縱向從父元素最底部從下向上排列，當父盒子高度不夠時會擠壓子元素的高度。
     .wrap {
        width: 400px;
        height: 100px;
        border: 1px solid red;
        display: flex;
        flex-direction: column-reverse;
      }

 

 

　　（2）felx-wrap 換行屬性。規定主軸的寬度或者高度不夠時，是否換行屬性。

 

    <style>
     .wrap {
          margin: 150px auto;
        width: 400px;
        height: 100px;
        border: 1px solid red;
        display: flex;
        flex-direction: row;
      }
      .item {
        width: 100px;
        height: 100px;
        border: 1px solid black;
        background-color: pink;
      }
    </style>
    <body>
    <div class="wrap">
      <div class="item">1</div>
      <div class="item">2</div>
      <div class="item">3</div>
      <div class="item">4</div>
      <div class="item">5</div>
    </div>
  </body>

 

　　　　a.flex-wrap: nowrap. 預設屬性，不換行，當寬度或者高度不夠出現了擠壓的情況。

 

    .wrap {
        margin: 150px auto;
        width: 400px;
        height: 100px;
        border: 1px solid red;
        display: flex;
        flex-direction: row;
        flex-wrap: nowrap;
      }

　　　　b.flex-wrap: wrap.允許子元素在父元素主軸的方向上換行，例如此例從上至下換行。

       .wrap {
          margin: 150px auto;
        width: 400px;
        height: 100px;
        border: 1px solid red;
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
      }

　　上面的程式碼由於邊框存在，導致寬度不夠出現了換行。

　　　　c.flex-wrap: wrap-reverse.允許子元素在父元素主軸的反方向上換行，例如此例從下至上換行。

 

      .wrap {
        margin: 150px auto;
        width: 400px;
        height: 100px;
        border: 1px solid red;
        display: flex;
        flex-direction: row;
        flex-wrap: wrap-reverse;
      }

 

 

　　（3）justify-content 主軸元素對齊方式屬性

 

    <style>
      .wrap {
        margin: 150px auto;
        width: 400px;
        height: 100px;
        border: 1px solid red;
        display: flex;
        flex-direction: row;
      }
      .item {
        width: 100px;
        height: 100px;
        border: 1px solid black;
        background-color: pink;
      }
    </style>
  <body>
    <div class="wrap">
      <div class="item">1</div>
      <div class="item">2</div>
      <div class="item">3</div>
    </div>
  </body>

 

　　　　a. justify-content : flex-start ，該屬性設定子元素在父元素開始到結束的方向排列，即從左到右從上到下。

 

      .wrap {
        margin: 150px auto;
        width: 400px;
        height: 100px;
        border: 1px solid red;
        display: flex;
        flex-direction: row;
        justify-content: flex-start;

      }

 

 

　　　　b. justify-content : flex-end ，該屬性設定子元素在父元素主軸結束到開始的方向排列，和 flex-start 相反，但是不改變子元素的前後順序，相當於子元素組成的一個整體，這個整體平移到父元素主軸結束的位置。

 

      .wrap {
        margin: 150px auto;
        width: 400px;
        height: 100px;
        border: 1px solid red;
        display: flex;
        flex-direction: row;
        justify-content: flex-end;
      }

 

 

　　　　c. justify-content : center，該屬性設定子元素在父元素主軸中間的位置開始排列，但是不改變子元素的前後順序，相當於子元素組成一個整體，這個整體平移到父元素中間的位置。

 

     .wrap {
        margin: 150px auto;
        width: 400px;
        height: 100px;
        border: 1px solid red;
        display: flex;
        flex-direction: row;
        justify-content:center
      }

　　　　d. justify-contet : sapce-around，該屬性設定每個子元素兩側的間隔相等，所以每個子元素之間的間隔要比子元素相對於父元素邊框的間隔大一倍。

 

    .wrap {
        margin: 150px auto;
        width: 400px;
        height: 100px;
        border: 1px solid red;
        display: flex;
        flex-direction: row;
        justify-content:space-around ;
      }

 

 

　　　　e. justify-content : space-between，該屬性設定每個子元素之間的間隔相等，子元素於父元素邊框之間沒有間隔。

 

    .wrap {
        margin: 150px auto;
        width: 400px;
        height: 100px;
        border: 1px solid red;
        display: flex;
        flex-direction: row;
        justify-content: space-between;
      }

 

 

　　（4）algin-items 交叉軸元素對齊方式屬性,最好在一條軸線的時候使用該屬性。

 

   <style>
      .wrap {
        margin: 150px auto;
        width: 400px;
        height: 100px;
        border: 1px solid red;
        display: flex;
        flex-direction: row;
      }
      .item1 {
        width: 70px;
        border: 1px solid black;
        background-color: pink;
      }
      .item2 {
        width: 60px;
        height: 80px;
        font-size: 18px;
        border: 1px solid black;
        background-color: pink;
        padding-top: 10px;
      }
      .item3 {
        font-size: 24px;
        width: 30px;
        border: 1px solid black;
        background-color: pink;
      }
    </style>
  </head>
  <body>
    <div class="wrap">
      <div class="item1">1</div>
      <div class="item2">2</div>
      <div class="item3">3</div>
      <div class="item3">4</div>
      <div class="item1">5</div>
      <div class="item2">6</div>
    </div>
  </body>

 

 

　　　　a. align-items: flex-start;該屬性設定子元素在交叉軸方向上對齊父元素的最頂部 。
    .wrap {
        margin: 150px auto;
        width: 400px;
        height: 100px;
        border: 1px solid red;
        display: flex;
        flex-direction: row;
        align-items: flex-start;
      }

　　　　b. align-items: flex-end; 該屬性設定子元素在交叉軸方向上對齊父元素的最底部
    .wrap {
        margin: 150px auto;
        width: 400px;
        height: 100px;
        border: 1px solid red;
        display: flex;
        flex-direction: row;
        align-items: flex-end;
      }

　　　　c. align-items: center; 該屬性設定子元素在交叉軸方向上相對父元素居中
     .wrap {
        margin: 150px auto;
        width: 400px;
        height: 100px;
        border: 1px solid red;
        display: flex;
        flex-direction: row;
        align-items: center;
      }

　　　　d. align-items: baseline; 該屬性設定相對於所有子元素第一行文字的基線對齊
     .wrap {
        margin: 150px auto;
        width: 400px;
        height: 100px;
        border: 1px solid red;
        display: flex;
        flex-direction: row;
        align-items: baseline;
      }

　　　　e. align-items: stretch; 該屬性設定當子元素沒有在交叉軸設定對應長度時候，使得子元素在交叉軸呈現拉伸效果 
      .wrap {
        margin: 150px auto;
        width: 400px;
        height: 100px;
        border: 1px solid red;
        display: flex;
        flex-direction: row;
        align-items: stretch;
      }

 

　　（5）algin-content 多條軸線時元素在交叉軸的對齊方式屬性，如果專案只有一根軸線，該屬性不起作用。相當於把每條主軸線看作一個整體元素，對每條軸線元素進行排列。

 

 <style>
      .wrap {
        margin: 150px auto;
        width: 400px;
        height: 400px;
        border: 1px solid red;
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
      }
      .item {
        width: 90px;
        height: 100px;
        border: 1px solid black;
        background-color: pink;
      }
    </style>
  </head>
  <body>
    <div class="wrap">
      <div class="item">1</div>
      <div class="item">2</div>
      <div class="item">3</div>
      <div class="item">4</div>
      <div class="item">5</div>
    </div>
  </body>

 

　　　　a. align-content: flex-start; 多條軸線的時候，軸線元素按與交叉軸起點對齊，如圖從上向下排列。
　　.wrap {
        margin: 150px auto;
        width: 400px;
        height: 400px;
        border: 1px solid red;
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        align-content: flex-start;
      }

　　　　b. align-content: flex-end; 多條軸線的時候，軸線與交叉軸結束點對齊，如圖從上向下排列，元素整體位於交叉軸結束位置。
    .wrap {
        margin: 150px auto;
        width: 400px;
        height: 400px;
        border: 1px solid red;
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        align-content: flex-end;
      }

　　　　c. align-content: center; 相當於把所有軸線元素看作一個整體，這個整體兩側的間隔相等，即這個整體到父元素邊框兩側距離相等 。
    .wrap {
        margin: 150px auto;
        width: 400px;
        height: 400px;
        border: 1px solid red;
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        align-content: center;
      }

　　　　d. align-content: space-between; 每條軸線元素之間的間隔相等，軸線元素與父元素兩端邊框沒有間距。
    .wrap {
        margin: 150px auto;
        width: 400px;
        height: 400px;
        border: 1px solid red;
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        align-content: space-between;
      }

　　　　e. align-content: space-around; 每個軸線元素兩側的間隔相等，所以每個軸線元素之間的間隔要比軸線元素與父元素邊框之間的間隔大一倍。
    .wrap {
        margin: 150px auto;
        width: 400px;
        height: 400px;
        border: 1px solid red;
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        align-content: space-around;
      }

 

　　2.flex佈局在開發中的使用以及需要注意的問題。

　　（1）當每條軸線長度相等時候

 

 <style>
      .wrap {
        border: 1px solid red;
        width: 400px;
        height: 400px;
        margin: 100px auto;
        padding: 10px;
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        justify-content: space-between;
        align-content: flex-start;
      }
      .item {
        margin-top: 5px;
        width: 30%;
        height: 100px;
        border: 1px solid pink;
      }
    </style>
  <body>
    <div class="wrap">
      <div class="item">1</div>
      <div class="item">2</div>
      <div class="item">3</div>
      <div class="item">4</div>
      <div class="item">5</div>
      <div class="item">6</div>
    </div>
  </body>

 

　　軸線長度不同時，同樣上面的程式碼就成為如下圖所示：

 

 

　　（2）當每條軸線長度不相等時候會出現上面的情況，要想解決這樣的問題，可以在後面補充一個佔位的div，具體程式碼如下：

<style>
      .wrap {
        border: 1px solid red;
        width: 400px;
        height: 400px;
        margin: 100px auto;
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        justify-content: space-around;
        align-content: flex-start;
      }
      .wrap::after {
        content: "";
        height: 0;
        width: 30%;
      }
      .item {
        margin-top: 5px;
        width: 30%;
        height: 100px;
        border: 1px solid pink;
      }
    </style>
  <body>
    <div class="wrap">
      <div class="item">1</div>
      <div class="item">2</div>
      <div class="item">3</div>
      <div class="item">4</div>
      <div class="item">5</div>
    </div>
  </body>

　　同樣也可以通過新增隱藏佔位元素的方法：

<style>
      .wrap {
        border: 1px solid red;
        width: 400px;
        height: 400px;
        margin: 100px auto;
        padding: 10px;
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        justify-content: space-between;
        align-content: flex-start;
      }
      .item {
        margin-top: 5px;
        width: 30%;
        height: 100px;
        border: 1px solid pink;
      }
      .hidden{
          visibility: hidden;
      }
    </style>
  <body>
    <div class="wrap">
      <div class="item">1</div>
      <div class="item">2</div>
      <div class="item">3</div>
      <div class="item">4</div>
      <div class="item">5</div>
      <div class="item hidden">6</div>
    </div>

總結

　　以上就是本文的全部內容，希望給讀者帶來些許的幫助和進步，方便的話點個關注，小白的成長踩坑之路會持續更新一些工作中常見的問題和技術點。

相關文章