css中align-content屬性如何使用?這個(gè)問(wèn)題可能是我們?nèi)粘W(xué)習(xí)或工作經(jīng)常見(jiàn)到的。希望通過(guò)這個(gè)問(wèn)題能讓你收獲頗深。下面是小編給大家?guī)?lái)的參考內(nèi)容,讓我們一起來(lái)看看吧!
創(chuàng)新互聯(lián)公司專注于圖木舒克網(wǎng)站建設(shè)服務(wù)及定制,我們擁有豐富的企業(yè)做網(wǎng)站經(jīng)驗(yàn)。 熱誠(chéng)為您提供圖木舒克營(yíng)銷型網(wǎng)站建設(shè),圖木舒克網(wǎng)站制作、圖木舒克網(wǎng)頁(yè)設(shè)計(jì)、圖木舒克網(wǎng)站官網(wǎng)定制、小程序開(kāi)發(fā)服務(wù),打造圖木舒克網(wǎng)絡(luò)公司原創(chuàng)品牌,更為您提供圖木舒克網(wǎng)站排名全網(wǎng)營(yíng)銷落地服務(wù)。
css align-content屬性在彈性容器內(nèi)的各項(xiàng)沒(méi)有占用交叉軸上所有可用的空間時(shí)對(duì)齊容器內(nèi)的各項(xiàng)(垂直)。容器內(nèi)必須有多行的項(xiàng)目,該屬性才能渲染出效果。
css align-content屬性怎么用?
定義和用法
align-content 屬性在彈性容器內(nèi)的各項(xiàng)沒(méi)有占用交叉軸上所有可用的空間時(shí)對(duì)齊容器內(nèi)的各項(xiàng)(垂直)。
提示:使用 justify-content 屬性對(duì)齊主軸上的各項(xiàng)(水平)。
注意:容器內(nèi)必須有多行的項(xiàng)目,該屬性才能渲染出效果。
默認(rèn)值: stretch
繼承: 否
可動(dòng)畫(huà)化: 否。
版本: CSS3
JavaScript 語(yǔ)法:
object.style.alignContent="center"
CSS 語(yǔ)法
align-content: stretch|center|flex-start|flex-end|space-between|space-around|initial|inherit;
屬性值
● stretch 默認(rèn)值。項(xiàng)目被拉伸以適應(yīng)容器。
● center 項(xiàng)目位于容器的中心。
● flex-start 項(xiàng)目位于容器的開(kāi)頭。
● flex-end 項(xiàng)目位于容器的結(jié)尾。
● space-between 項(xiàng)目位于各行之間留有空白的容器內(nèi)。
● space-around 項(xiàng)目位于各行之前、之間、之后都留有空白的容器內(nèi)。
● initial 設(shè)置該屬性為它的默認(rèn)值。
● inherit 從父元素繼承該屬性。
實(shí)例
對(duì)齊彈性盒的 <div> 元素的各項(xiàng):
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <style> #main { width: 70px; height: 300px; border: 1px solid #c3c3c3; display: -webkit-flex; display: flex; -webkit-flex-wrap: wrap; flex-wrap: wrap; -webkit-align-content: center; align-content: center; } #main div { width: 70px; height: 70px; } </style> </head> <body> <div id="main"> <div style="background-color:coral;"></div> <div style="background-color:lightblue;"></div> <div style="background-color:pink;"></div> </div> <p><b>注意:</b> Internet Explorer 10 及更早版本瀏覽器不支持 align-content 屬性。</p> <p><b>注意:</b> Safari 7.0 及更新版本通過(guò) -webkit-align-content 屬性支持該屬性。</p> </body> </html>
效果輸出:
感謝各位的閱讀!看完上述內(nèi)容,你們對(duì)css中align-content屬性如何使用大概了解了嗎?希望文章內(nèi)容對(duì)大家有所幫助。如果想了解更多相關(guān)文章內(nèi)容,歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道。
本文名稱:css中align-content屬性如何使用
瀏覽地址:http://bm7419.com/article16/ijpddg.html
成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián),為您提供定制開(kāi)發(fā)、面包屑導(dǎo)航、做網(wǎng)站、微信小程序、網(wǎng)站營(yíng)銷、小程序開(kāi)發(fā)
聲明:本網(wǎng)站發(fā)布的內(nèi)容(圖片、視頻和文字)以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主,如果涉及侵權(quán)請(qǐng)盡快告知,我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng),如需處理請(qǐng)聯(lián)系客服。電話:028-86922220;郵箱:631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載,或轉(zhuǎn)載時(shí)需注明來(lái)源: 創(chuàng)新互聯(lián)