css align-items屬性怎麼用？
- 青灯夜游原創
- 2019-02-16 10:21:2423956瀏覽
css align-items屬性是用於指定float容器內項目在橫軸方向的對齊方式，其語法是“align-items: stretch|center|flex-start|flex-end|baseline;” 。
css align-items屬性是用來指定float容器內項目在橫軸方向的對齊方式：拉伸以填滿容器、以橫軸為中心、在頂部垂直對齊、在底部垂直對齊、橫軸的基線處對齊。 【影片教學推薦：CSS教學】
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>效果圖：
以上就是這篇文章的全部內容，希望能對大家的學習有所幫助。更多精彩內容大家可以追蹤php中文網相關教學欄位！ ！ ！
以上是css align-items屬性怎麼用？的詳細內容。更多資訊請關注PHP中文網其他相關文章！
陳述：
本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn