【移动端网页布局】flex 弹性布局 ⑤ ( 设置侧轴单行子元素排列方式 | align-items 样式说明 | 代码示例 )
warning:
这篇文章距离上次修改已过203天，其中的内容可能已经有所变动。
在flex布局中，align-items属性用于设置侧轴上的单行子元素的排列方式。
.container {
display: flex;
align-items: center; /* 垂直居中 */
}align-items可以取以下值：
flex-start：交叉轴的起点对齐。flex-end：交叉轴的终点对齐。center：交叉轴的中点对齐。baseline：项目的第一行文字的基线对齐。stretch：如果项目未设置高度或设为auto，将占满整个容器的高度。
示例代码：
<!DOCTYPE html>
<html>
<head>
<style>
.flex-container {
display: flex;
height: 200px;
background-color: lightgrey;
align-items: center; /* 垂直居中 */
}
.flex-item {
width: 100px;
height: 100px;
margin: 10px;
background-color: cornflowerblue;
text-align: center;
line-height: 100px; /* 使文字垂直居中 */
}
</style>
</head>
<body>
<div class="flex-container">
<div class="flex-item">1</div>
<div class="flex-item">2</div>
<div class="flex-item">3</div>
</div>
</body>
</html>在这个例子中，.flex-container设置了align-items: center;，使得其中的.flex-item子元素垂直居中。
评论已关闭