在上两节课中，我们讲的都是弹性盒子内部的子盒子宽高一致的情况，那么，如果子盒子的宽高不一致将如何对齐呢？
答案是：当子盒子的宽高不一致时，如果不设置align-items属性，当纵向排列时，所有子盒子都向是左边对齐，当横向排列时，所有子盒子都是顶边对齐。
使用align-items属性后
align-items设置的是子元素之间的对齐方式，既适用于单行也适用于多行（一般都是将多行分组为单行来控制），既适用于横向排列也使用与纵向排列。
当弹性盒子内部的子盒子没有设置宽高时，使用align-items:stretch;会自动拉伸以适配盒子的宽度或高度，如果子盒子设置了宽高则保持子盒子原有宽高。
stretch是align-items属性的默认值。
排列方式flex-direction、对齐方式justify-content、align-content和align-items都是设置在父盒子上的。
实际应用时，我们应该先设置flex-direction排列方式，如果内部的子元素是单行或单列的，就使用justify-content设置对齐方式，如果内部的子元素是多行的，就使用align-content设置对齐方式，然后再用align-items属性设置所有子盒子在父盒子中的位置（居上、居下、居中、拉伸填充）。
下面通过图片来描述：
代码如下，大家可自行逐行测试理解：
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>弹性布局flex弹性盒子子元素之间的对齐以及整体位置 align-items</title>
</head>
<style>
.box{
width:600px;
height:400px;
border:1px solid #000;
/* 设置弹性容器 */
display:flex;
flex-direction:row;
/* 顶部对齐 */
/* align-items:flex-start; */
/* 底部对齐 */
/* align-items:flex-end; */
/* 元素被拉伸以适应容器(默认) */
/* align-items:stretch; */
/* 中心聚合对齐 */
/* align-items:center; */
/* 元素位于容器的基线上 */
/* align-items:baseline; */
}
.d1{
width:110px;
height:80px;
border: 5px solid #55aa00;
font-size: 12px;
}
.d2{
width:120px;
height:100px;
border: 5px solid #aa557f;
font-size: 15px;
}
.d3{
width:130px;
height:120px;
border: 5px solid #0000ff;
font-size: 18px;
}
.d4{
width:110px;
height:80px;
border: 5px solid #55aa00;
font-size: 12px;
}
.d5{
width:120px;
height:100px;
border: 5px solid #aa557f;
font-size: 15px;
}
.d6{
width:130px;
height:120px;
border: 5px solid #0000ff;
font-size: 12px;
}
</style>
<body>
<div class="box">
<div class="d1">第一个盒子</div>
<div class="d2">第二个盒子</div>
<div class="d3">第三个盒子</div>
<div class="d4">第四个盒子</div>
<div class="d5">第五个盒子</div>
<div class="d6">第六个盒子</div>
</div>
</body>
</html>
|
窥视卡
雷达卡
发表于 2023-2-2 11:53:16
提升卡
置顶卡
沉默卡
喧嚣卡
变色卡
千斤顶
显身卡
发表于 2023-2-20 13:42:34
