任务应用添加任务后兄弟分类Div出现空白的问题求助

嘿，这个问题我太熟悉啦！你遇到的情况其实是Flexbox的默认对齐规则在搞鬼——咱们来一步步拆解：

问题根源 #

你的父容器Container用了display: flex，而Flexbox默认的align-items属性值是stretch。这个属性会让所有flex子元素（也就是你的两个TasksContainer）在**交叉轴（这里是垂直方向）**上被强制拉伸，和最高的那个子元素保持同样高度。所以当运动分类的容器因为新增任务变高时，工作分类的容器哪怕是空的，也会被自动撑高到相同高度。

解决方案 #

只需要给父容器加一行代码，修改align-items的取值就能搞定：

export const Container = styled.div`
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  align-items: flex-start; /* 新增这行，让子容器只适配自身内容高度 */
`;

设置成flex-start后，每个TasksContainer只会根据自己内部的内容来决定高度，不会再被强制拉伸到和另一个容器一样高了。

如果之后你需要调整子容器的垂直对齐细节（比如想让它们顶部对齐但留点间距），可以在TasksContainer的样式里加margin-top，核心就是改掉默认的stretch属性值就解决问题啦～

内容的提问来源于stack exchange，提问作者Ahmed Magdy