您好,登錄后才能下訂單哦!
這篇文章運用簡單易懂的例子給大家介紹怎么用css align-content屬性,代碼非常詳細,感興趣的小伙伴們可以參考借鑒,希望對大家能有所幫助。
align-content屬性是用來設置自由盒內(nèi)部各個項目在垂直方向排列方式。
CSS align-content屬性
作用:align-content屬性是用來設置自由盒內(nèi)部各個項目在垂直方向排列方式;它修改了flex-wrap屬性的行為。
使用條件:
必須對父元素設置自由盒屬性display:flex;,并且設置排列方式為橫向排列flex-direction:row;然后設置換行,flex-wrap:wrap;這樣這個屬性的設置才會起作用。
說明:該align-content屬性是對其容器內(nèi)部的項目起作用,對父元素進行設置;容器內(nèi)必須有多行的項目,才能渲染出效果。
語法:
align-content: stretch|center|flex-start|flex-end|space-between|space-around;
取值說明:
stretch:默認值,元素被拉伸以適應容器,會拉伸容器內(nèi)每個項目占用的空間,填充方式為給每個項目下方增加空白。
center:取消項目之間的空白并把所有項目垂直居中,使得元素位于容器的中心。
flex-start:取消項目之間的空白,并把項目放在容器頂部,使得元素位于容器的開頭。
flex-end:取消項目之間的空白并把項目放在容器底部,使得元素位于容器的結(jié)尾。
space-between:使項目在垂直方向兩端對齊。即上面的項目對齊容器頂部,最下面一個項目對齊容器底部。留相同間隔在每個項目之間。
space-around:使每個項目上下位置保留相同長度空白,使得項目之間的空白為兩倍的單個項目空白。
CSS align-content屬性使用示例
<!DOCTYPE html> <html> <head> <style> #main1,#main2,#main3,#main4,#main5,#main6{ width: 70px; height: 250px; border: 1px solid #c3c3c3; display: -webkit-flex; display: flex; -webkit-flex-wrap: wrap; flex-wrap: wrap; margin:10px; float:left; } div *{ width: 70px; height: 70px; } #main1 { -webkit-align-content: stretch; align-content: stretch; } #main2 { -webkit-align-content: center; align-content: center; } #main3 { -webkit-align-content: flex-start; align-content: flex-start; } #main4 { -webkit-align-content: flex-end; align-content: flex-end; } #main5 { -webkit-align-content: space-between; align-content: space-between; } #main6 { -webkit-align-content: space-around; align-content: space-around; } </style> </head> <body> <h2>align-content屬性</h2> <div id="main1"> <div style="background-color:coral;"></div> <div style="background-color:lightblue;"></div> <div style="background-color:pink;"></div> </div> <div id="main2"> <div style="background-color:coral;"></div> <div style="background-color:lightblue;"></div> <div style="background-color:pink;"></div> </div> <div id="main3"> <div style="background-color:coral;"></div> <div style="background-color:lightblue;"></div> <div style="background-color:pink;"></div> </div> <div id="main4"> <div style="background-color:coral;"></div> <div style="background-color:lightblue;"></div> <div style="background-color:pink;"></div> </div> <div id="main5"> <div style="background-color:coral;"></div> <div style="background-color:lightblue;"></div> <div style="background-color:pink;"></div> </div> <div id="main6"> <div style="background-color:coral;"></div> <div style="background-color:lightblue;"></div> <div style="background-color:pink;"></div> </div> </body> </html>
效果圖:
關(guān)于怎么用css align-content屬性就分享到這里了,希望以上內(nèi)容可以對大家有一定的幫助,可以學到更多知識。如果覺得文章不錯,可以把它分享出去讓更多的人看到。
免責聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點不代表本網(wǎng)站立場,如果涉及侵權(quán)請聯(lián)系站長郵箱:is@yisu.com進行舉報,并提供相關(guān)證據(jù),一經(jīng)查實,將立刻刪除涉嫌侵權(quán)內(nèi)容。