如何使用Flexbox布局元素：实现Item1与Item2、Item3的块级组合等高对齐

这需求用现代CSS布局很容易搞定，给你两种常用的实现思路，根据你的实际场景选就行：

方案1：Flexbox 布局（推荐，兼容性好） #

核心思路是把父容器变成弹性容器，把Item2和Item3放进一个子容器里（让它们保持块级垂直排列），然后让Item1和这个子容器作为弹性项并排，利用Flex的默认特性让Item1高度自动匹配右侧组合的高度。

代码示例：

<div class="parent" style="display: flex; gap: 10px; /* 可选，加个间距更美观 */">
  <div id="item1" style="background: #f0f0f0;">Item1</div>
  <div class="item-group" style="background: #e0e0e0;">
    <div id="item2">Item2</div>
    <div id="item3">Item3</div>
  </div>
</div>

关键点说明： #

• display: flex 让父容器变成弹性容器，子元素自动并排
• 把Item2和Item3放进.item-group里，因为div默认是块级元素，所以它们会垂直排列
• Flex容器默认的align-items: stretch会让所有弹性子项的高度自动拉伸到和最高的子项一致，所以Item1的高度会自动匹配.item-group的整体高度

方案2：CSS Grid 布局（更灵活，无需额外容器） #

如果不想多套一层容器，用Grid布局更简洁，直接通过网格列的分配来实现：

代码示例：

<div class="parent" style="display: grid; grid-template-columns: auto 1fr; gap: 10px;">
  <div id="item1" style="background: #f0f0f0;">Item1</div>
  <div id="item2" style="background: #e0e0e0;">Item2</div>
  <div id="item3" style="background: #e0e0e0;">Item3</div>
</div>

关键点说明： #

• display: grid 启用网格布局
• grid-template-columns: auto 1fr 定义两列，第一列宽度由Item1内容决定，第二列占剩余空间
• Item2和Item3会自动排在第二列（网格布局默认按顺序填充），垂直堆叠成一个整体，Item1所在的第一列高度会自动匹配第二列的总高度

两种方案都能完美满足你的需求，Flexbox适合更传统的弹性布局场景，Grid则在复杂网格布局下更有优势，选哪个都没问题~

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