CSS中如何使用align-content屬性

小編給大家分享一下CSS中如何使用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;
  }

效果圖：

以上是“CSS中如何使用align-content屬性”這篇文章的所有內容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內容對大家有所幫助，如果還想學習更多知識，歡迎關注億速云行業資訊頻道！