align-content

作用:

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

條件:

必須對父元素設置自由盒屬性display:flex;，并且設置排列方式為橫向排列flex-direction:row;并且設置換行，flex-wrap:wrap;這樣這個屬性的設置才會起作用。

設置對象:

這個屬性是對她容器內部的項目起作用，對父元素進行設置。

取值:

stretch:默認設置，會拉伸容器內每個項目占用的空間，填充方式為給每個項目下方增加空白。第一個項目默認從容器頂端開始排列。

XML/HTML Code復制內容到剪貼板

html>

Align-content

#father{

width:200px;

display:flex;

flex-direction:row;

flex-wrap:wrap;

align-content:strech;

height:200px;

background-color:grey;

}

.son1{

height:30px;

width:100px;

background-color:orange;

}

.son2{

height:30px;

width:100px;

background-color:red;

}

.son3{

height:30px;

width:100px;

background-color:#08a9b5;

}

q

總結

以上是生活随笔為你收集整理的Css3中align-content,深入理解css中的align-content属性的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。