如何使用Flexbox实现下图布局？现有尝试失败求技术帮助

你之前的尝试错误沿用了Float布局的思路（比如手动加margin-left和position: relative），没有发挥Flexbox的特性。下面是适配你需求的实现方案：

实现思路 #

1. 外层容器开启flex-wrap: wrap，让元素自动换行，实现两行布局
2. 利用Flexbox的margin-left: auto特性，将绿色块推到容器右侧，替代手动计算margin的方式
3. 用gap统一控制元素间距，避免margin带来的间距翻倍问题

完整代码 #

HTML #

<div class="container">
  <div class="flex-2"></div>
  <div class="flex-1"></div>
  <div class="flex-3"></div>
  <div class="flex-4"></div>
</div>

CSS #

.container {
  height: 220px;
  width: 320px;
  display: flex;
  flex-wrap: wrap; /* 允许元素换行 */
  gap: 10px; /* 元素间的间距，替代统一margin */
  padding: 10px; /* 容器内边距，模拟原代码的margin效果 */
  box-sizing: border-box; /* 内边距不会增加容器总宽度 */
}

.flex-1,
.flex-2,
.flex-3,
.flex-4 {
  height: 100px;
}

.flex-1 {
  background-color: green;
  width: 200px;
  margin-left: auto; /* 自动填充左侧剩余空间，实现右对齐 */
}

.flex-2 {
  background-color: red;
  width: 100px;
}

.flex-3 {
  background-color: orange;
  width: 100px;
}

.flex-4 {
  background-color: blue;
  width: 100px;
}

关键修正点 #

• 移除了冗余的浏览器前缀（现代主流浏览器已支持标准Flex属性）
• 删掉了不必要的position: relative，Flexbox本身就能实现对齐布局
• 用flex-wrap: wrap实现两行结构，替代强行挤元素的错误做法
• 通过margin-left: auto实现绿色块的右对齐，这是Flexbox中实现元素对齐的标准方法

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