溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
css中align-content屬性如何使用？這個問題可能是我們日常學習或工作經常見到的。希望通過這個問題能讓你收獲頗深。下面是小編給大家帶來的參考內容，讓我們一起來看看吧！
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進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
