Flexbox网格嵌入Flex项目：求无position:absolute的最佳实践方案

嘿，我太懂你花两天折腾这个的感受了——Flexbox看似直观，但遇到这种非对称的网格布局确实容易卡壳！下面是完全遵循Flexbox最佳实践的实现方案，全程没用到position:absolute这类取巧手段，完美匹配你给出的布局：

实现代码 #

HTML结构 #

<div class="flex-container">
  <!-- 第一行布局 -->
  <div class="top-row">
    <div class="item large-item">Item 1</div>
    <div class="item-container vertical">
      <div class="item small-item">Item 2</div>
      <div class="item small-item">Item 3</div>
    </div>
  </div>
  <!-- 第二行布局 -->
  <div class="bottom-row">
    <div class="item medium-item">Item 4</div>
    <div class="item medium-item">Item 5</div>
  </div>
</div>

CSS样式 #

/* 基础重置与全局设置 */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

/* 外层容器：垂直排列两行 */
.flex-container {
  display: flex;
  flex-direction: column;
  gap: 1rem; /* 行与行之间的间距，可调整 */
  padding: 1rem;
  max-width: 1200px;
  margin: 0 auto;
}

/* 行容器：水平排列子元素 */
.top-row, .bottom-row {
  display: flex;
  gap: 1rem; /* 列与列之间的间距，可调整 */
  width: 100%;
}

/* 右侧垂直容器：堆叠两个小元素 */
.item-container.vertical {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  flex: 1; /* 与左侧大元素平分宽度 */
}

/* 左侧大元素：占据对应宽度与高度 */
.large-item {
  flex: 1;
  min-height: 300px; /* 可根据需求调整高度 */
  background: #e0f7fa;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
}

/* 右侧小元素 */
.small-item {
  flex: 1; /* 平分垂直容器的高度 */
  background: #ffebee;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
}

/* 底部中等元素 */
.medium-item {
  flex: 1; /* 平分底部行的宽度 */
  min-height: 150px; /* 可根据需求调整高度 */
  background: #fff3e0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
}

方案核心要点 #

• 嵌套Flex容器：通过在右侧设置垂直方向的Flex容器，轻松实现两个小元素上下堆叠的效果，这是Flexbox处理非对称布局的核心技巧，完全不需要依赖绝对定位。
• flex属性控制空间占比：用flex: 1让元素自动平分可用空间，无论是宽度还是高度都能自适应容器，保证布局的响应式特性。
• gap属性管理间距：使用Flex原生的gap属性替代传统margin，避免了外边距折叠问题，让间距控制更直观、更可靠。
• box-sizing规范：全局设置box-sizing: border-box，确保padding和border不会改变元素的实际尺寸，是现代布局的基础规范。

你可以根据实际需求调整颜色、高度、间距等参数，这个方案稳定且易于维护，完全符合Flexbox的最佳实践。

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