溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
這篇文章給大家介紹css 中如何使用align-content屬性，內容非常詳細，感興趣的小伙伴們可以參考借鑒，希望對大家能有所幫助。
css align-content屬性怎么用?
定義和用法
align-content 屬性在彈性容器內的各項沒有占用交叉軸上所有可用的空間時對齊容器內的各項（垂直）。
提示：使用 justify-content 屬性對齊主軸上的各項（水平）。
注意：容器內必須有多行的項目，該屬性才能渲染出效果。
默認值：stretch
繼承：否
可動畫化：否。
版本：CSS3
JavaScript 語法：
object.style.alignContent="center"
CSS 語法
align-content: stretch|center|flex-start|flex-end|space-between|space-around|initial|inherit;
屬性值
● stretch默認值。項目被拉伸以適應容器。
● center項目位于容器的中心。
● flex-start項目位于容器的開頭。
● flex-end項目位于容器的結尾。
● space-between項目位于各行之間留有空白的容器內。
● space-around項目位于各行之前、之間、之后都留有空白的容器內。
● initial設置該屬性為它的默認值。
● inherit從父元素繼承該屬性。
實例
對齊彈性盒的 <div> 元素的各項：
<!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 及更新版本通過 -webkit-align-content 屬性支持該屬性。</p></body></html>關于css 中如何使用align-content屬性就分享到這里了，希望以上內容可以對大家有一定的幫助，可以學到更多知識。如果覺得文章不錯，可以把它分享出去讓更多的人看到。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
