目录
首页 笔记 详情

align-items属性值用法(flex布局容器解析)


align-items是flex布局中“容器”的第5个属性,定义的是“项目”交叉轴上如何对齐。首先我们理解一下交叉轴,“容器”中默认两条主轴——主轴(main axis)和垂直的交叉轴(cross axis)。没错,垂直(与主轴垂直),换言之,我们把主轴当做X轴,那么交叉轴就是Y轴。align-items就是决定“项目”在交叉轴上是如何对齐的。交叉轴的开始位置叫做cross start,结束位置叫做cross end(这两个位置与flex-direction有关)。所以它的取值的其中的三个值就是flex-start和flex-end还有center(这或许对你记忆这两个取值有帮助)。

align-items: flex-start | flex-end | center | baseline | stretch

依次解释一下这五个值:

  1. flex-start: 交叉轴的起点对齐。
  2. flex-end :交叉轴的终点对齐。
  3. center : 交叉轴的中点对齐。
  4. baseline : 项目的第一行文字的基线对齐。
  5. stretch (默认值) : 如果项目未设置高度或设为auto,将占满整个容器的高度。

在代码中试验一下这五个值,首先是HTML代码

<div class="container">
 <div class="item" style="background: rgb(140 199 181);height: 100px">
 <p>1</p>
 </div>
 <div class="item" style="background: rgb(190 237 199); height: 300px">
 <p>2</p>
 </div>
 <div class="item" style="background: rgb(236 173 158); height: 140px">
 <p>3</p>
 </div>
 <div class="item" style="background: rgb(214 213 183);height: 80px">
 <p>4</p>
 </div>
 <div class="item" style="background: rgb(209 186 116);height: 250px">
 <p>5</p>
 </div>
</div>

然后加上css 代码

.container{
 width:1000px;
 height:400px;
 display: flex;
 justify-content: space-around;
 background-color:rgb(25 202 173);
}
.item{
 display: flex;
 flex-shrink: 0;
 justify-content: center;
 align-items: center;
 width:100px;
 color:rgb(244 96 108);
 font-size: 60px;
}

要注意,我为每个“项目”都添加了一个不同的高度。此时,交叉轴为竖直方向,由上到下(默认情况下)。

现在,为.container加上align-items的第一个取值——align-items:flex-start

flex笔记4——align-items

align-items:flex-start

效果很是一目了然吧,自然如果align-items的取值为flex-end,那么效果就是

flex笔记4——align-items

align-items:flex-end

那么,取值为center呢?也猜到了吧!

flex笔记4——align-items

align-items:center

这个取值在笔记3中使用过,得到了竖直方向居中的效果。第四个取值就有所不同了, align-items:baseline。

flex笔记4——align-items

align-items:baseline

在看一下这个取值的定义—— 项目的第一行文字的基线对齐。这个基线就是图上,我额外加上的红色直线。这个基线是由什么决定的呢?答案是,项目文字距离交叉轴开始位置最远的 "boy" 。上图中,明显就是第二“项目”,它的文字距离交叉轴开始位置最远。这个取值是一个让“项目”文字在主轴方向呈现一个对齐效果(排排坐,吃果果)。

好了,到了最后一个取值——stretch,这个词的译文为 拉长

flex笔记4——align-items

不对啊,这不是align-items:flex-start的效果吗?这是为什么呢?别忘记了,第五个取值的定义—— 如果项目未设置高度或设为auto,将占满整个容器的高度。我们之前为每个“项目”设置了高度,所以没有取消高度设置,即使align-items取值为stretch,那么实际效果就是align-items:flex-start的效果。好了,我们改写一下HTML的代码,把每个“项目”的高度去除,再看实际效果。

flex笔记4——align-items

align-items:stretch

可以看到,此时每个“项目”的高度就和“容器”的高度一样。


写笔记

咨询

您的电子邮箱地址不会被公开。