Flexbox：align-items取值限制与align-content单行生效的疑问

疑问1：为什么align-items无法使用space-around、space-evenly这类取值？ #

核心要搞清楚两者的作用逻辑差异：

• justify-content的作用是在主轴上分配容器的剩余空间，针对的是所有子项组成的整体，通过把空间分配在子项之间或两端实现对齐；
• align-items是控制单个flex子项在交叉轴上的自身对齐方式，针对的是每个独立子项，比如让子项靠交叉轴顶部、底部，或者拉伸填满所在行的高度。

space-around、space-evenly这类值的本质是「空间分配」，但align-items的设计目标是「对齐单个元素」，它不需要去分配空间，只是给每个子项设定在所在弹性行中的位置，所以这类空间分配型的取值并不适用于它。

疑问2：为什么测试中单行Flexbox里align-content也能生效？ #

先看你给出的测试代码：

.cont{
    height:150px;
    border: 2px solid red;
    display: flex;
    gap: 20px;
    flex-wrap: wrap;
    resize: both;
    overflow: scroll;
    align-content: flex-end;
    /* align-items: flex-end; */
}

.items{
    background-color: rgb(203, 151, 83);
    width: 50px;
    height: 50px;
    text-align: center;
}

<body>
    <div class="cont">
        <div class="items">1</div>
        <div class="items">2</div>
        <div class="items">3</div>
        <div class="items">4</div>
        <div class="items">5</div>
    </div>
</body>

这里的关键是你设置了flex-wrap: wrap——哪怕当前是单行状态，flex-wrap: wrap会让flex容器的弹性行（flex line）高度由子项高度+gap决定，而不是强制填满容器交叉轴高度。你的容器高度是150px，子项总高度+gap是50px + 20px*4 = 130px，容器有20px的剩余空间，这时候align-content就会控制这个唯一的弹性行在交叉轴上的位置（比如flex-end就是把整个行贴到容器底部）。

如果把flex-wrap改成nowrap，你会发现align-content完全不生效——因为nowrap时弹性行会被拉伸至容器交叉轴高度，没有剩余空间可以分配，自然align-content起不了作用。之前看到的"align-content仅适用于多行"的说法是简化表述，更准确的是：当flex容器在交叉轴上有剩余空间，且存在多个弹性行（或开启wrap后单行也有剩余空间）时，align-content才会生效。

内容的提问来源于stack exchange，提问作者Utsav Meena