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

定義：align-content 屬性在彈性容器內(nèi)的各項(xiàng)沒(méi)有占用交叉軸上所有可用的空間時(shí)對(duì)齊容器內(nèi)的各項(xiàng)（垂直）。

作用：會(huì)設(shè)置自由盒內(nèi)部各個(gè)項(xiàng)目在垂直方向排列方式。

條件：必須對(duì)父元素設(shè)置屬性display:flex，并且設(shè)置換行，flex-wrap:wrap這樣這個(gè)屬性的設(shè)置才會(huì)起作用。

設(shè)置：這個(gè)屬性是對(duì)其容器內(nèi)的項(xiàng)目起作用，所以對(duì)父元素進(jìn)行設(shè)置即可。

align-content的取值，使用時(shí)可以根據(jù)需要取值。

stretch：被拉伸以適應(yīng)容器（默認(rèn)值）。
center：位于容器的中心。
flex-start：位于容器的開(kāi)頭。
flex-end：位于容器的結(jié)尾。
space-between ：位于各行之間留有空白的容器內(nèi)。
space-around：位于各行之前、之間、之后都留有空白的容器內(nèi)。

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

二、align-content實(shí)例解析

描述：外面一個(gè)div里面有四個(gè)小的div，為了看清楚效果，給它設(shè)置了不同的顏色，然后在大的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;
  }

效果圖：

總結(jié)：圖片效果一目了然，給父元素設(shè)置 align-content: center后，里面的元素在容器中垂直居中了，至于其他效果，這里不一一示范了，大家可以自己動(dòng)手試試，看看是不是和結(jié)論一致，尤其是初學(xué)者要多加練習(xí)。

以上就是圖文詳解CSS align-content屬性的使用方法的詳細(xì)內(nèi)容，更多請(qǐng)關(guān)注php中文網(wǎng)其它相關(guān)文章！