如何在不修改HTML结构的情况下实现目标Flex布局？

根据你提供的固定HTML结构，原CSS的Flex布局会让item-1和item-2各占50%宽度并排，item-3单独占满一行，这和目标布局（左侧图片，右侧垂直排列标题与描述）不符。以下是两种可行的修正方案：

方案一：使用Grid布局（推荐） #

Grid布局能更直观地实现这种跨行列的布局，代码简洁且适配性强：

.container {
  display: grid;
  /* 定义两列，可根据需求调整比例，比如改为300px 1fr固定图片宽度 */
  grid-template-columns: 1fr 1fr;
  grid-template-rows: auto auto;
  gap: 1rem; /* 可选：添加元素间的间距 */
}

.item-1 {
  /* 让图片元素占据右侧标题+描述的两行高度 */
  grid-row: 1 / span 2;
}

.item-2 {
  grid-column: 2;
  grid-row: 1;
}

.item-3 {
  grid-column: 2;
  grid-row: 2;
}

方案二：调整Flex布局 #

如果坚持使用Flex，可通过调整元素的宽度和外边距实现目标效果：

.container {
  display: flex;
  flex-wrap: wrap;
}

.item-1 {
  /* 固定占据左侧50%宽度，不收缩不拉伸 */
  flex: 0 0 50%;
  /* 让图片顶部和右侧标题对齐 */
  align-self: flex-start;
}

.item-2 {
  flex: 0 0 50%;
}

.item-3 {
  /* 固定宽度50%，并通过左边距移到右侧区域 */
  flex: 0 0 50%;
  margin-left: 50%;
}

说明 #

• Grid方案更适合这种有明确行列关系的布局，维护起来更简单；
• 若需要固定图片宽度，可将grid-template-columns中的1fr改为具体数值（如300px），让右侧区域自适应剩余宽度。

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