溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
這篇文章運用簡單易懂的例子給大家介紹怎么用css align-items屬性，代碼非常詳細，感興趣的小伙伴們可以參考借鑒，希望對大家能有所幫助。
css align-items屬性是用于指定float容器內項目在橫軸方向的對齊方式：拉伸以填充容器、以橫軸為中心、在頂部垂直對齊、在底部垂直對齊、橫軸的基線處對齊。
CSS align-items屬性
align-items屬性是Flexible Box 布局模塊的子屬性。
作用：定義了如何沿當前行的橫軸布置彈性項目的默認（對齊）行為。
注：可以在float容器內的每個子項目中使用align-self屬性來覆蓋align-items屬性的樣式。
語法：
align-items: stretch|center|flex-start|flex-end|baseline;
stretch（默認）：拉伸以填充容器（仍然尊重最小寬度/最大寬度）。
center：項目以橫軸為中心；默認情況下，橫軸是垂直的，這意味著flexbox項目將垂直居中 。
flex-start：項目在橫軸的開始處對齊，即項目將在頂部垂直對齊。
flex-end：項目在橫軸末端對齊，即項目將在底部垂直對齊
baseline：項目在橫軸的基線處對齊，即flexbox項目將自身對齊，以使其文本的基線沿水平線對齊。
CSS align-items屬性的使用示例
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<style>
.flex-container {
padding: 0;
margin: 0;
list-style: none;
-ms-box-orient: horizontal;
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -moz-flex;
display: -webkit-flex;
display: flex;
float: left;
}
.flex-start {
-webkit-align-items: flex-start;
align-items: flex-start;
}
.flex-end {
-webkit-align-items: flex-end;
align-items: flex-end;
}
.flex-end li {
background: gold;
}
.center {
-webkit-align-items: center;
align-items: center;
}
.center li {
background: deepskyblue;
}
.baseline {
-webkit-align-items: baseline;
align-items: baseline;
}
.baseline li {
background: lightgreen;
}
.stretch {
-webkit-align-items: stretch;
align-items: stretch;
}
.stretch li {
background: hotpink;
}
.flex-item {
background: tomato;
padding: 5px;
width: 50px;
margin: 5px;
line-height: 50px;
color: white;
font-weight: bold;
font-size: 2em;
text-align: center;
}
</style>
</head>
<body>
<div class="box">
<ul class="flex-container flex-start">
<li class="flex-item">1<br>2</li>
<li class="flex-item">3</li>
<li class="flex-item">4<br>5</li>
<li class="flex-item">6</li>
</ul>
<ul class="flex-container flex-end">
<li class="flex-item">1<br>2</li>
<li class="flex-item">3</li>
<li class="flex-item">4<br>5</li>
<li class="flex-item">6</li>
</ul>
<ul class="flex-container center">
<li class="flex-item">1<br>2</li>
<li class="flex-item">3</li>
<li class="flex-item">4<br>5</li>
<li class="flex-item">6</li>
</ul>
<ul class="flex-container baseline">
<li class="flex-item">1<br>2</li>
<li class="flex-item">3</li>
<li class="flex-item">4<br>5</li>
<li class="flex-item">6</li>
</ul>
<ul class="flex-container stretch">
<li class="flex-item">1<br>2</li>
<li class="flex-item">3</li>
<li class="flex-item">4<br>5</li>
<li class="flex-item">6</li>
</ul>
</div>
</body>
</html>效果圖：
關于怎么用css align-items屬性就分享到這里了，希望以上內容可以對大家有一定的幫助，可以學到更多知識。如果覺得文章不錯，可以把它分享出去讓更多的人看到。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
