這篇文章運用簡單易懂的例子給大家介紹怎么用css align-content屬性,代碼非常詳細,感興趣的小伙伴們可以參考借鑒,希望對大家能有所幫助。
成都創(chuàng)新互聯(lián)是一家從事企業(yè)網(wǎng)站建設(shè)、網(wǎng)站設(shè)計、成都做網(wǎng)站、行業(yè)門戶網(wǎng)站建設(shè)、網(wǎng)頁設(shè)計制作的專業(yè)網(wǎng)站設(shè)計公司,擁有經(jīng)驗豐富的網(wǎng)站建設(shè)工程師和網(wǎng)頁設(shè)計人員,具備各種規(guī)模與類型網(wǎng)站建設(shè)的實力,在網(wǎng)站建設(shè)領(lǐng)域樹立了自己獨特的設(shè)計風格。自公司成立以來曾獨立設(shè)計制作的站點1000+。
align-content屬性是用來設(shè)置自由盒內(nèi)部各個項目在垂直方向排列方式。
CSS align-content屬性
作用:align-content屬性是用來設(shè)置自由盒內(nèi)部各個項目在垂直方向排列方式;它修改了flex-wrap屬性的行為。
使用條件:
必須對父元素設(shè)置自由盒屬性display:flex;,并且設(shè)置排列方式為橫向排列flex-direction:row;然后設(shè)置換行,flex-wrap:wrap;這樣這個屬性的設(shè)置才會起作用。
說明:該align-content屬性是對其容器內(nèi)部的項目起作用,對父元素進行設(shè)置;容器內(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)容可以對大家有一定的幫助,可以學到更多知識。如果覺得文章不錯,可以把它分享出去讓更多的人看到。
分享標題:怎么用cssalign-content屬性
網(wǎng)站路徑:http://jinyejixie.com/article14/ggesde.html
成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián),為您提供網(wǎng)站改版、營銷型網(wǎng)站建設(shè)、自適應網(wǎng)站、網(wǎng)頁設(shè)計公司、網(wǎng)站排名、域名注冊
聲明:本網(wǎng)站發(fā)布的內(nèi)容(圖片、視頻和文字)以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主,如果涉及侵權(quán)請盡快告知,我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場,如需處理請聯(lián)系客服。電話:028-86922220;郵箱:631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載,或轉(zhuǎn)載時需注明來源: 創(chuàng)新互聯(lián)