關於css中的align-content用法詳解

來源:互聯網
上載者:User
align-content

作用:

會設定自由盒內部各個項目在垂直方向相片順序。

條件:
必須對父元素設定自由盒屬性display:flex;,並且設定相片順序為橫向排列flex-direction:row;並且設定換行,flex-wrap:wrap;這樣這個屬性的設定才會起作用。
設定對象:

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


取值:
stretch:預設設定,會展開容器內每個項目佔用的空間,填充方式為給每個項目下方增加空白。第一個項目預設從容器頂端開始排列。


<!DOCTYPE=html><html lang="zh-cn"><head><meta charset="UTF-8"><title>Align-content</title><style>#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;}</style></head><body><p id="father"><p class="son1">q</p><p class="son2">w</p><p class="son3">e</p><p class="son3">e</p><p class="son3">e</p></p></body></html>


Center:這個會取消項目之間的空白並把所有項目垂直置中。


<!DOCTYPE=html><html lang="zh-cn"><head><meta charset="UTF-8"><title>關於文件項目測試</title><style>#father{        width:200px;    display:flex;    flex-direction:row;    flex-wrap:wrap;    align-content:center;    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;}.son4{          height:30px;    width:100px;    background-color:#9ad1c3;}.son5{          height:30px;    width:100px;    background-color:rgb(21,123,126);}</style></head><body><p id="father"><p class="son1">q</p><p class="son2">w</p><p class="son3">e</p><p class="son4">e</p><p class="son5">e</p></p></body></html>


Flex-start:這個會取消項目之間的空白,並把項目放在容器頂部。


<!DOCTYPE=html><html lang="zh-cn"><head><meta charset="UTF-8"><title>關於文件項目測試</title><style>#father{        width:200px;    display:flex;    flex-direction:row;    flex-wrap:wrap;    align-content:flex-start;    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;}.son4{          height:30px;    width:100px;    background-color:#9ad1c3;}.son5{          height:30px;    width:100px;    background-color:rgb(21,123,126);}</style></head><body><p id="father"><p class="son1">q</p><p class="son2">w</p><p class="son3">e</p><p class="son4">e</p><p class="son5">e</p></p></body></html>

flex-end:這個會取消項目之間的空白並把項目放在容器底部。

align-content:flex-end;


space-between這個會使項目在垂直方向左右對齊。即上面的項目對齊容器頂部,最下面一個項目對齊容器底部。留相同間隔在每個項目之間。

align-content:space-between;


Space-around:這個會使每個項目上下位置保留相同長度空白,使得項目之間的空白為兩倍的單個項目空白。

align-content:space-around;


Inherit:使得元素的這個屬性繼承自它的父元素。
innitial:使元素這個屬性為預設初始值。

相關文章

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.