Flex容器换行时如何拉伸首个子项高度并让第三子项排在第二子项下方

解决方法 #

1. 实现item3换行后对齐item2下方

你遇到的换行后item3靠左的问题，根源是外层flex容器的justify-content: space-between规则：当第二行只有单个元素时，space-between会将该元素放置在主轴起始位置，自然就对齐了左侧的item1。
我们可以调整规则替换实现逻辑：

• 去掉外层.flex-container的justify-content: space-between配置
• 给单独的item3元素添加margin-left: auto，即可实现和原来一致的两端对齐效果，且换行后item3会自动靠右对齐，正好落在item2的正下方。

2. 换行时拉伸首个子项高度

如果需要换行时让包裹item1、item2的首个子容器高度自动拉伸，只需调整外层容器的交叉轴对齐规则：

• 将外层.flex-container的align-items: center改为align-items: stretch
  因为首个子容器本身就是flex布局，内部保留align-items: center，所以它内部的item1、item2还是会保持垂直居中，不会出现内容错位。换行后外层容器高度被两行元素撑开，首个子项会自动拉伸到占满第一行的全部高度，如果需要让它占满整个外层容器的总高度，额外给首个子容器添加height: 100%、外层容器添加height: fit-content即可。

修改后完整代码 #

div {
  border: 1px solid #d3d3d3;
}

.flex-container {
  display: flex;
  align-items: stretch; /* 替换原来的align-items: center */
  /* 去掉原来的justify-content: space-between */
  flex-wrap: wrap;
}

.nowrap {
  flex-wrap: nowrap;
  align-items: center; /* 保证内部item垂直居中 */
}

.item {
  height: 100px;
  width: 100px;
}

/* 新增规则 */
.item.right {
  margin-left: auto;
}

<div class="flex-container">
  <div class="flex-container nowrap">
    <div class="item">
      item 1
    </div>
    <div class="item">
      item 2
    </div>
  </div>

  <div class="item right"> <!-- 新增right类 -->
    item 3
  </div>
</div>

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