【移动端网页布局】flex 弹性布局子项目属性 ② ( align-self 子项目属性 - 设置指定子项目元素侧轴排列方式 | 代码示例 )
align-self属性用于设置弹性布局模型中单个子元素的垂直对齐方式。这个属性可以覆盖flex-container的align-items属性。
以下是align-self属性的可能值：
auto：默认值。继承父元素的align-items属性，如果没有父元素，则等同于stretch。flex-start：子元素的顶部与行的顶部对齐。flex-end：子元素的底部与行的底部对齐。center：子元素在行中居中。baseline：子元素根据他们的基线对齐。stretch：如果子元素没有设置高度或设为auto，子元素会被拉伸以匹配容器的高度。
实例代码：
<!DOCTYPE html>
<html>
<head>
<style>
.flex-container {
display: flex;
height: 200px;
align-items: flex-start; /* 设置默认对齐方式 */
}
.flex-item {
width: 100px;
margin: 5px;
background-color: lightblue;
border: 1px solid black;
}
.item1 {
align-self: flex-end; /* 子元素1向下对齐 */
}
.item2 {
align-self: center; /* 子元素2居中对齐 */
}
.item3 {
align-self: baseline; /* 子元素3基线对齐 */
}
.item4 {
align-self: stretch; /* 子元素4被拉伸 */
/* 注意：如果设置高度，拉伸效果将不会发生 */
}
</style>
</head>
<body>
<div class="flex-container">
<div class="flex-item item1">1</div>
<div class="flex-item item2">2</div>
<div class="flex-item item3">3</div>
<div class="flex-item item4">4</div>
</div>
</body>
</html>在这个例子中，我们创建了一个具有flex-container类的容器，它包含四个具有flex-item类的子元素。每个子元素都通过其特定的类来使用align-self属性来改变它们的对齐方式。
评论已关闭