Flex布局中子元素高度自适应与父容器对齐的实战技巧

1. 理解Flex布局中的高度自适应问题

Flex布局是现代前端开发中最常用的布局方式之一，但很多开发者在使用过程中都会遇到子元素高度被强制撑开的问题。这个问题通常表现为：当父容器设置了固定高度或某个子元素内容较多时，其他子元素的高度会被拉伸到与父容器或最高子元素相同的高度。

造成这种现象的根本原因是Flex布局的默认对齐方式。在Flex容器中，align-items属性的默认值是stretch，这意味着所有子元素在没有明确设置高度的情况下，会自动拉伸以填满父容器的交叉轴方向（在默认的flex-direction: row情况下就是垂直方向）。

举个例子，假设我们有以下HTML结构：

<div class="parent">
  <div class="child">短内容</div>
  <div class="child">这是一个比较长的内容，会导致其他元素被撑开</div>
  <div class="child">另一个短内容</div>
</div>

如果使用默认的Flex布局样式：

.parent {
  display: flex;
  gap: 10px;
}

你会发现所有子元素的高度都会与最长内容的子元素保持一致，这往往不是我们想要的效果。理解这个默认行为是解决高度自适应问题的第一步。

2. 使用align-self控制单个子元素高度

当我们需要让某些子元素保持自身内容高度而不被其他元素撑开时，align-self属性就派上用场了。这个属性允许我们对单个Flex子元素设置不同于父容器align-items的对齐方式。

最常用的几个align-self值包括：

• flex-start：将元素对齐到交叉轴的起点
• center：将元素居中对齐
• baseline：将元素按基线对齐
• stretch：拉伸元素以填满容器（默认值）

回到前面的例子，如果我们想让短内容的子元素保持自身高度，可以这样修改CSS：

.child {
  align-self: flex-start;
  /* 或者 */
  align-