如何用Flex布局实现混合行列布局？（原float可轻松实现）

嗨，我来帮你搞定这个Flex布局的问题！其实用Flex实现你要的这种混合行列布局很简单，我给你两种实用的方案参考：

首先先确认一下你要的布局效果：

方案一：嵌套Flex容器（结构更清晰） #

这种方式通过两层Flex容器拆分左右区域，逻辑直观，后期维护也方便。

HTML代码 #

<div class="container">
  <div class="a">column</div>
  <div class="right-section">
    <div class="b">row1</div>
    <div class="c">row2</div>
  </div>
</div>

CSS代码 #

/* 外层Flex容器：控制左右两列的排布 */
.container {
  display: flex;
  gap: 10px; /* 替代margin，更便捷的间距控制 */
}

/* 左侧固定宽度列 */
.a {
  background: red;
  width: 30%;
  height: 100px;
}

/* 右侧垂直布局容器：占据剩余所有空间 */
.right-section {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: space-between; /* 让两个子元素上下分布，自动填充中间间距 */
}

/* 右侧上下两个行元素 */
.b, .c {
  height: 45px;
}
.b {
  background: green;
}
.c {
  background: lightblue;
}

方案二：单Flex容器+换行（无需嵌套） #

如果你不想增加额外的嵌套结构，可以用flex-wrap结合对齐属性来实现：

HTML代码 #

<div class="container">
  <div class="a">column</div>
  <div class="b">row1</div>
  <div class="c">row2</div>
</div>

CSS代码 #

.container {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  height: 100px; /* 设定容器高度，让子元素能按预期对齐 */
}

.a {
  background: red;
  width: 30%;
  height: 100%; /* 占满容器高度 */
}

.b, .c {
  width: calc(70% - 10px); /* 计算剩余宽度，减去gap的间距 */
  height: 45px;
}
.b {
  background: green;
  align-self: flex-start; /* 对齐容器顶部 */
}
.c {
  background: lightblue;
  align-self: flex-end; /* 对齐容器底部 */
}

两种方案都能完美实现你要的效果，嵌套容器的方式结构更清晰，推荐优先使用；单容器方案适合不想增加DOM层级的场景。

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