小編給大家分享一下CSS中如何使用align-content屬性，相信大部分人都還不怎么了解，因此分享這篇文章給大家參考一下，希望大家閱讀完這篇文章后大有收獲，下面讓我們一起去了解一下吧！

為瓊結(jié)等地區(qū)用戶提供了全套網(wǎng)頁設(shè)計制作服務(wù)，及瓊結(jié)網(wǎng)站建設(shè)行業(yè)解決方案。主營業(yè)務(wù)為網(wǎng)站制作、網(wǎng)站設(shè)計、瓊結(jié)網(wǎng)站設(shè)計，以傳統(tǒng)方式定制建設(shè)網(wǎng)站，并提供域名空間備案等一條龍服務(wù)，秉承以專業(yè)、用心的態(tài)度為用戶提供真誠的服務(wù)。我們深信只要達到每一位用戶的要求，就會得到認(rèn)可，從而選擇與我們長期合作。這樣，我們也可以走得更遠！

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

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

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

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

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

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

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

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

二、align-content實例解析

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

HTML部分：

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;
  }

效果圖：

以上是“CSS中如何使用align-content屬性”這篇文章的所有內(nèi)容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內(nèi)容對大家有所幫助，如果還想學(xué)習(xí)更多知識，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道！