CSS的align-content屬性怎么用

這篇文章主要介紹了CSS的align-content屬性怎么用，具有一定借鑒價值，感興趣的朋友可以參考下，希望大家閱讀完這篇文章之后大有收獲，下面讓小編帶著大家一起了解一下。

    一、CSSalign-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部分：

    <divclass="box">

    <divstyle="background-color:red;"></div>

    <divstyle="background-color:orange;"></div>

    <divstyle="background-color:yellow;"></div>

    <divstyle="background-color:green;"></div>

    </div>

    CSS部分：

    .box{

    width:100px;

    height:300px;

    border:1pxsolid#c3c3c3;

    display:-webkit-flex;

    display:flex;

    -webkit-flex-wrap:wrap;

    flex-wrap:wrap;

    -webkit-align-content:center;

    align-content:center;

    }

    .boxdiv{

    width:100px;

    height:50px;

    }

感謝你能夠認真閱讀完這篇文章，希望小編分享的“CSS的align-content屬性怎么用”這篇文章對大家有幫助，同時也希望大家多多支持億速云，關注億速云行業資訊頻道，更多相關知識等著你來學習!