align-items
align-items ：设置子元素在侧轴上（默认侧轴为y轴）的排列方式
align-items的属性值：
| 属性值 | 含义 |
|---|---|
| flex-start | 子元素贴着侧轴的头部排列（默认值） |
| flex-end | 子元素贴着侧轴的尾部排列 |
| center | 子元素在侧轴上居中对齐 |
| stretch | 拉伸，使得子元素在侧轴方向上与父元素等大 |
具体实例（以侧轴为y轴为列）：
flex-start
<body>
<div>
<span>1</span>
<span>2</span>
<span>3</span>
</div>
</body>
<style type="text/css">
div{
display: flex;
width: 800px;
height: 400px;
background-color: orange;
align-items: flex-start; /*默认值*/
}
div span{
width: 200px;
height: 100px;
background: skyblue;
}
</style>
执行结果：子元素贴着侧轴的头部排列（顶端对齐）
flex-end
<body>
<div>
<span>1</span>
<span>2</span>
<span>3</span>
</div>
</body>
<style type="text/css">
div{
display: flex;
width: 800px;
height: 400px;
background-color: orange;
align-items: flex-end;
}
div span{
width: 200px;
height: 100px;
background: skyblue;
}
</style>
执行结果：子元素贴着侧轴的尾部排列（底端对齐）
center
<body>
<div>
<span>1</span>
<span>2</span>
<span>3</span>
</div>
</body>
<style type="text/css">
div{
display: flex;
width: 800px;
height: 400px;
background-color: orange;
align-items: center;
}
div span{
width: 200px;
height: 100px;
background: skyblue;
}
</style>
执行结果：子元素在侧轴上居中对齐
stretch
<body>
<div>
<span>1</span>
<span>2</span>
<span>3</span>
</div>
</body>
<style type="text/css">
div{
display: flex;
width: 800px;
height: 400px;
background-color: orange;
align-items: stretch;
}
div span{
width: 200px;
/*height: 100px;*/
background: skyblue;
}
</style>
执行结果：子元素沿着侧轴（y轴）方向拉伸，使得子元素与父元素等高
值得一提的是：在使用stretch属性值时，不要给子元素高度/宽度（侧轴为y轴时不给高度，侧轴为x轴时不给宽度），否则在侧轴方向上将没有拉伸效果
如：
<body>
<div>
<span>1</span>
<span>2</span>
<span>3</span>
</div>
</body>
<style type="text/css">
div{
display: flex;
width: 800px;
height: 400px;
background-color: orange;
align-items: stretch;
}
div span{
width: 200px;
height: 100px;
background: skyblue;
}
</style>
执行结果：因为给子元素span设置了高度为100px，故在侧轴上实现不了拉伸效果
下面来看侧轴为x轴的情况：
flex-start
<body>
<div>
<span>1</span>
<span>2</span>
<span>3</span>
</div>
</body>
<style type="text/css">
div{
display: flex;
width: 800px;
height: 400px;
background-color: orange;
flex-direction: column;
align-items: flex-start; /*默认值 可不写*/
}
div span{
width: 200px;
height: 100px;
background: skyblue;
}
</style>
执行结果：子元素贴着侧轴的头部排列（左端对齐）
flex-end
<body>
<div>
<span>1</span>
<span>2</span>
<span>3</span>
</div>
</body>
<style type="text/css">
div{
display: flex;
width: 800px;
height: 400px;
background-color: orange;
flex-direction: column;
align-items: flex-end;
}
div span{
width: 200px;
height: 100px;
background: skyblue;
}
</style>
执行结果：子元素贴着侧轴的尾部排列（右端对齐）
center
<body>
<div>
<span>1</span>
<span>2</span>
<span>3</span>
</div>
</body>
<style type="text/css">
div{
display: flex;
width: 800px;
height: 400px;
background-color: orange;
flex-direction: column;
align-items: center;
}
div span{
width: 200px;
height: 100px;
background: skyblue;
}
</style>
执行结果：子元素在侧轴上居中对齐
stretch
<body>
<div>
<span>1</span>
<span>2</span>
<span>3</span>
</div>
</body>
<style type="text/css">
div{
display: flex;
width: 800px;
height: 400px;
background-color: orange;
flex-direction: column;
align-items: stretch;
}
div span{
/*width: 200px; 不给子元素宽度*/
height: 100px;
background: skyblue;
}
</style>
执行结果：子元素沿着侧轴方向拉伸，使得子元素与父元素等宽
注意：align-items属性只应用于侧轴上的子元素是单项（单行或单列）的情况，如果出现子元素有多项（换行或换列）的情况，即flex-wrap：wrap；，则不能使用align-items，而要使用align-content属性，该属性的解释放在下一篇博客。
6306
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
