在前端开发中，使用 CSS Flexbox 布局已经成为常见的布局方式。尤其是在移动端设备上，灵活的弹性布局可以适应不同屏幕尺寸的设备。但是在使用 Flexbox 布局时，我们可能会遇到一个问题：当 flex 子元素在换行时，原本指定的对齐方式失效。本文将详细介绍该问题的原因，及如何解决此问题。
问题描述
下面是一个简单的例子，包含四个子元素，每个子元素宽度相同，但高度不同。
<div class="container"> <div class="item">1</div> <div class="item">2</div> <div class="item">3</div> <div class="item">4</div> </div>
-- -------------------- ---- ------- ---------- - -------- ----- ---------- --- ----- -- --- ---------- ----- ------ -- ---------------- -------------- - ----- - ------ ---- -
上述代码中，我们使用了 Flexbox 布局，并将子元素置为换行状态。同时，我们指定了 justify-content: space-between;，希望让子元素在一行内按照间距相等的方式进行排列。但是当子元素在换行时，这种排列方式就失效了。如下图所示（蓝色方框为容器，每个子元素宽度 25%）：
可以看到第二行的子元素排列方式并不是按照等间距的方式进行的，而是像左对齐一样排列的。这不是我们想要的效果。
问题原因
造成这个问题的原因是 Flexbox 布局默认的对齐方式是基于“主轴”和“交叉轴”进行的。
例如，当我们将 justify-content: space-between; 应用于容器时，在主轴上第一个子元素会贴紧容器的起始位置，而最后一个子元素会贴紧容器的结束位置。但是当父元素在交叉轴上换行时，Flexbox 的默认行为是将第一行放在交叉轴的起始位置，第二行放在交叉轴的结束位置。
这就导致了当交叉轴上有多行子元素时，每一行的间距会被计算为行内间距而不是行间间距，这就导致在相邻行之间无法均匀分布对齐。
解决方法
为了解决这个问题，我们需要使用框架来指定容器在交叉轴上的对齐方式。
本例中，我们只需要将 align-items: flex-start; 应用于容器，即可将所有的子元素始终对齐在交叉轴的起始位置。如下所示：
-- -------------------- ---- ------- ---------- - -------- ----- ---------- --- ----- -- --- ---------- ----- ------ -- ---------------- -------------- ------------ ----------- -- --- ---------- -- - ----- - ------ ---- -
这样就可以得到如下的效果：
可以看到，现在在任何情况下，子元素总是对齐在容器的左上角。这就解决了 flexbox 布局中子元素换行后对齐方式失效的问题。
总结
在使用 Flexbox 布局时，我们应该注意 flex 子元素在换行时的对齐方式可能会受到影响，导致原本的对齐方式失效。我们可以通过将 align-items 应用于容器来指定子元素在交叉轴上的对齐方式，以解决此问题。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64924be848841e9894019495