Flex 容器中 Flex 项目的 100% 总宽度，中间有间隙

Question

我正在尝试将元素放置在带有 flex-wrap 的 Flexbox 中，中间有间隙

理想的显示方式应该是：

• 在第一行，蓝色框占据整个宽度，任何地方都没有间隙
• 第二排红框占据前33%，绿框占据剩下的66%
• 2 行之间应有 12px 间隙
• 红色和绿色项目之间应该有 12px 间隙，而它们不会进入下一行，因此它们的宽度实际上应该变为 33% - 6px 和 66% - 6px，以便为间隙留出空间。

最终结果应该是这样的：

.container {
 max-width: 200px;
 width: 200px;
 display: flex;
 flex-wrap: wrap;
 gap: 12px;
 padding: 0 12px 0 12px;
}

.item1 {
width:33%;
height: 200px;
background-color: red;
}

.item2 {
width:66%;
height: 200px;
background-color: green;
}

.item3 {
width: 100%;
height: 200px;
background-color: blue;
}

<div class="container">
  <div class="item3"></div>
  <div class="item1"></div>
  <div class="item2"></div>  
</div>

Answer 1

我添加了一个 flex-direction: row，删除了填充并向宽度添加了一个计算函数，并将 66% 提高到 67% 以创建 100% 总计。

.container {
 max-width: 200px;
 width: 200px;
 display: flex;
 flex-direction: row;
 flex-wrap: wrap;
 gap: 12px;
}

.item1 {
width: calc(33% - 6px);
height: 200px;
background-color: red;
}

.item2 {
width:calc(67% - 6px);
height: 200px;
background-color: green;
}

.item3 {
width: 100%;
height: 200px;
background-color: blue;
}

<div class="container">
  <div class="item3"></div>
  <div class="item1"></div>
  <div class="item2"></div>  
</div>