如何用Flex实现该布局？左列高度动态，右列内容分上下对齐

当然可以用Flex实现这种布局！而且它刚好适配你这种左侧文本高度动态变化的场景，核心就是利用Flex的垂直布局能力和空间分布属性，轻松实现右侧内容的上下对齐效果。

实现思路 #

1. 外层容器设置为display: flex，让左右两列横向并排，同时Flex默认的align-items: stretch会让右侧列的高度自动跟左侧动态高度的列保持一致。
2. 右侧列本身也作为Flex容器，把布局方向改成垂直（flex-direction: column），再通过justify-content: space-between让内部的顶部内容和底部内容分别对齐到容器的顶端和底端，中间的空白区域会自动填充，完美匹配左侧的动态高度。

完整代码示例 #

HTML结构

<div class="layout-container">
  <!-- 左侧动态高度列 -->
  <div class="left-column">
    左侧动态文本内容<br>
    左侧动态文本内容<br>
    左侧动态文本内容<br>
    左侧动态文本内容<br>
    左侧动态文本内容<br>
    左侧动态文本内容<br>
    左侧动态文本内容<br>
    左侧动态文本内容<br>
    左侧动态文本内容<br>
  </div>

  <!-- 右侧上下对齐列 -->
  <div class="right-column">
    <div class="top-section">XX Align To Top XX</div>
    <div class="bottom-section">Align to bottom</div>
  </div>
</div>

CSS样式

.layout-container {
  display: flex;
  gap: 24px; /* 可选：设置左右列之间的间距 */
  border: 1px solid #ddd;
  padding: 16px;
  max-width: 800px;
  margin: 20px auto;
}

.left-column {
  /* 可根据需求设置宽度，比如固定宽度或比例 */
  width: 220px;
  line-height: 1.6;
}

.right-column {
  flex: 1; /* 让右侧列占据剩余的可用空间 */
  display: flex;
  flex-direction: column;
  justify-content: space-between; /* 核心：实现上下两端对齐 */
}

.top-section, .bottom-section {
  /* 可选：给上下内容添加样式区分 */
  padding: 10px;
  background-color: #f5f5f5;
  border-radius: 4px;
}

关键属性说明 #

• justify-content: space-between：这是实现右侧上下对齐的核心，它会在垂直主轴上，把第一个子元素（顶部内容）推到容器顶端，最后一个子元素（底部内容）推到容器底端，中间的空白区域自动填充，完全适配左侧的动态高度。
• 外层flex的align-items: stretch：默认属性，确保右侧列高度始终和左侧列保持一致，不管左侧文本高度怎么变。
• flex: 1：让右侧列自动占据容器剩余宽度，保证布局的响应性。

如果需要调整左右列的宽度比例，只需要修改左侧的width或者给左右列都设置flex属性（比如flex: 2和flex: 3）即可，灵活性拉满。

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