1. 介紹
align-items類似于justify-content可以設(shè)置子元素的顯示的位置，不同的是justify-content設(shè)置的是子元素在主軸方向上的芹血，而align-items則是設(shè)置子元素在側(cè)軸中的位置藐窄，相對(duì)justify-content屬性了解的可參考flex布局之justify-content屬性詳解资昧，那么接下來(lái)就讓我來(lái)介紹align-items的值。（注：align-items生效的前提示flex容器不換行荆忍，以下演示均已側(cè)軸為從上到下方向）
- flex-start（默認(rèn)）
即默認(rèn)狀態(tài)下的在側(cè)軸的上邊位置格带，頁(yè)面代碼如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
#container {
display: flex;
margin: 0px auto;
width: 800px;
height: 400px;
background-color: purple;
align-items: flex-start;
}
.item {
background-color: red;
margin-left: 10px;
margin-top: 10px;
width: 250px;
height: 100px;
}
</style>
</head>
<body>
<div id="container">
<div class="item">1</div>
<div class="item">2</div>
<div class="item">1</div>
<div class="item">2</div>
</div>
</body>
</html>
其效果如下：
align-items: flex-start效果
-
flex-end
其flex-end則是在側(cè)軸的下邊位置，效果如下圖所示：
align-items: flex-end效果 -
center
設(shè)置為center值之后刹枉，其子元素整體的位置則是在側(cè)的中心位置叽唱，其效果如下：
align-items: center效果
自己先給自己點(diǎn)個(gè)贊，沖拔⒈Α棺亭！咱是最棒的！嘿嘿蟋软！觀看的小可愛(ài)一起點(diǎn)個(gè)贊唄镶摘，求求了！
