如何设置Flex容器使部分元素居顶、部分居底且中间仅留动态间隙？

要实现你要的效果，给Flex容器加上以下两个核心属性就行：

• flex-direction: column：让容器内元素垂直排列，匹配你上下分组的需求
• justify-content: space-between：会让顶部元素贴住容器上边缘、底部元素贴住容器下边缘，中间的空白区域自动集中在两组元素之间，正好让“紫色间隙”只出现在你指定的位置

另外必须保证容器有足够的垂直高度（比如设置height或min-height），否则justify-content: space-between无法生效——容器高度不够的话，所有元素会挤在一起，不会产生中间的间隙。

举个简单的代码示例：

.flex-container {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  height: 400px; /* 给容器设置合适的垂直高度 */
}

.top-item {
  align-self: flex-start;
}

.bottom-item {
  align-self: flex-end;
}

<div class="flex-container">
  <div class="top-item">test short desc</div>
  <div class="top-item">第二个顶部元素</div>
  <div class="bottom-item">ul dropdown title 1</div>
  <div class="bottom-item">第二个底部元素</div>
</div>

这样设置后，顶部的两个元素会紧贴容器顶部，底部的两个元素紧贴容器底部，中间的空白只会出现在两组元素之间，完全符合你的需求。

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