通过前面三节的讲解，我们深入分析了弹性盒子的三种对齐，justify-content、align-content和align-items，这三种对齐方式都是写在父盒子上来统一控制子盒子的。
那么有没有一种可以独立控制弹性盒子内部每一个子盒子的方法呢？下面我们就来看align-self属性，请记住：它是写到子盒子的CSS属性中的。
下面看代码：
一、横向对齐
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>弹性布局flex弹性盒子针对指定子元素的对齐方式 align-self</title>
</head>
<style>
.box{
width:600px;
height:400px;
border:1px solid #000;
/* 设置弹性容器 */
display:flex;
flex-direction:row;
}
.d1{
width:110px;
height:80px;
border: 5px solid #55aa00;
font-size: 12px;
align-self:flex-start;
}
.d2{
width:120px;
height:100px;
border: 5px solid #aa557f;
font-size: 15px;
align-self:flex-end;
}
.d3{
width:130px;
height:120px;
border: 5px solid #0000ff;
font-size: 18px;
align-self:center;
}
.d4{
/* width:110px;
height:80px; */
border: 5px solid #55aa00;
font-size: 12px;
align-self:stretch;
}
</style>
<body>
<div class="box">
<div class="d1">第一个盒子<br>flex-start</div>
<div class="d2">第二个盒子<br>flex-end</div>
<div class="d3">第三个盒子<br>center</div>
<div class="d4">第四个盒子<br>不设置宽高的stretch<br>如果设置了宽高，与flex-start一样</div>
</div>
</body>
</html>
显示结果如下：
二、纵向对齐
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>弹性布局flex弹性盒子针对指定子元素的对齐方式 align-self</title>
</head>
<style>
.box{
width:600px;
height:400px;
border:1px solid #000;
/* 设置弹性容器 */
display:flex;
flex-direction:column;
}
.d1{
width:110px;
height:80px;
border: 5px solid #55aa00;
font-size: 12px;
align-self:flex-start;
}
.d2{
width:120px;
height:100px;
border: 5px solid #aa557f;
font-size: 15px;
align-self:flex-end;
}
.d3{
width:130px;
height:120px;
border: 5px solid #0000ff;
font-size: 18px;
align-self:center;
}
.d4{
/* width:110px;
height:80px; */
border: 5px solid #55aa00;
font-size: 12px;
align-self:stretch;
}
</style>
<body>
<div class="box">
<div class="d1">第一个盒子<br>flex-start</div>
<div class="d2">第二个盒子<br>flex-end</div>
<div class="d3">第三个盒子<br>center</div>
<div class="d4">第四个盒子<br>不设置宽高的stretch<br>如果设置了宽高，与flex-start一样</div>
</div>
</body>
</html>
|
窥视卡
雷达卡
发表于 2023-2-2 12:20:19
提升卡
置顶卡
沉默卡
喧嚣卡
变色卡
千斤顶
显身卡
发表于 2023-2-20 13:42:34
