圖文詳解CSS align-content屬性的使用方法

大部分前端工作者對常用的一些CSS屬性應該已經爛熟於心了吧，那今天就來聊聊稍微生僻的CSS屬性，你知道怎麼使用 CSS align-content 屬性嗎？ align-content 都有哪些屬性值呢？ 想知道的朋友們繼續往下看吧。

一、CSS align-content屬性的定義和使用方法

#定義：align-content 屬性在彈性容器內的各項沒有佔用交叉軸上所有可用的空間時對齊容器內的各項（垂直）。

作用：會設定自由盒內部各個項目在垂直方向排列方式。

條件：必須對父元素設定屬性display:flex，並且設定換行，flex-wrap:wrap這樣這個屬性的設定才會運作。

設定：這個屬性是對其容器內的項目起作用，所以對父元素進行設定即可。

align-content的取值，使用時可依需求取值。

stretch：被拉伸以適應容器（預設值）。
center：位於容器的中心。
flex-start：位於容器的開頭。
flex-end：位於容器的結尾。
space-between ：位於各行之間留有空白的容器內。
space-around：位於各行之前、之間、之後都留有空白的容器內。

寫法：align-content: stretch|center|flex-start|flex-end|space-between|space-around

二、align-content實例解析

描述：外面一個div裡面有四個小的div，為了看清楚效果，給它設定了不同的顏色，然後在大的div裡面加上 align-content: center;
讓裡面的div可以在容器的垂直方向居中。程式碼如下：

HTML部分：

<div class="box">
    <div style="background-color:red;"></div>
     <div style="background-color:orange;"></div>
     <div style="background-color:yellow;"></div>
     <div style="background-color:green;"></div>
  </div>

CSS部分：

.box {
      width: 100px;
      height: 300px;
      border: 1px solid #c3c3c3;
      display: -webkit-flex;
      display: flex;
      -webkit-flex-wrap: wrap;
      flex-wrap: wrap;
      -webkit-align-content: center;
      align-content: center;
  } 
  .box div {
      width: 100px;
      height: 50px;
  }

效果圖：

總結：圖片效果一目了然，給父元素設定 align-content: center後，裡面的元素在容器中垂直居中了，至於其他效果，這裡不一一示範了，大家可以自己動手試試，看看是不是跟結論一致，尤其是初學者要多加練習。

以上是圖文詳解CSS align-content屬性的使用方法的詳細內容。更多資訊請關注PHP中文網其他相關文章！