能否用单排Flexbox实现类似CSS Grid的布局结构？

可以用Flexbox实现你要的布局效果，核心思路是通过设置元素的flex-basis模拟三列宽度，同时手动计算大元素的高度来匹配Grid中跨多行的效果。以下是具体实现代码：

CSS 代码 #

.container {
  width: 100%;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: flex-start;
  gap: 10px; /* 和原Grid布局保持一致的间隙 */
}

.item {
  background-color: aquamarine;
  flex-basis: calc((100% - 20px)/3); /* 计算三列宽度，扣除两个间隙的总宽度 */
  height: 200px; /* 小元素固定高度 */
}

.item.big {
  /* 计算大元素高度：10个小元素高度 + 9个垂直间隙的高度 */
  height: calc(200px * 10 + 10px * 9);
  align-self: flex-start; /* 保持顶部对齐，避免被容器拉伸 */
}

HTML 代码 #

<div class="container">
  <div class="item">1</div>
  <div class="item">2</div>
  <div class="item big">3</div>
  <div class="item">4</div>
  <div class="item">5</div>
  <div class="item">6</div>
  <div class="item">7</div>
  <div class="item">8</div>
  <div class="item">9</div>
  <div class="item">10</div>
  <div class="item">11</div>
  <div class="item">12</div>
</div>

实现说明 #

• Flex是一维布局系统，无法像Grid那样直接设置跨多行，因此需要手动计算大元素的高度，让它刚好覆盖10个小元素加间隙的总高度。
• 通过flex-basis的计算公式确保每个元素占据三分之一的容器宽度（扣除间隙），模拟Grid的三列效果。
• align-self: flex-start用于防止大元素被Flex容器垂直拉伸，保持和小元素顶部对齐。

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