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

Question

我正在尝试使用 flex-wrap 将元素定位在 flexbox 中，中间有间隙

理想情况下，应该显示的方式是：

• 在第一行，蓝色框占据全宽，任何地方都没有间隙
• 第二排红框占前33%，绿框占剩余66%
• 两行之间应该有 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，删除了填充并为宽度添加了 calc 函数，并将 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>

Answer 2

您可以使用flex-basis和flex-grow而不是width 。 看下面的例子...

 .container { max-width: 200px; width: 200px; display: flex; flex-wrap: wrap; gap: 12px; padding: 0 12px 0 12px; } .item1 { flex-basis: 33%; height: 200px; background-color: red; } .item2 { flex-basis: 60%; /* Reduce this value abit and allow to auto grow */ flex-grow: 1; /* Last item will fill up the remaining space */ height: 200px; background-color: green; } .item3 { flex-basis: 100%; height: 200px; background-color: blue; }

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

Answer 3

这是@Ben 变体，但改进了计算

 .container { --gap: 12px; max-width: 200px; width: 200px; display: flex; flex-direction: row; flex-wrap: wrap; gap: var(--gap); // better use like veriable, you can edit it one time in all plays together } .item { height: 200px; // we have pattern, we don't need repeat it } .item1 { width: calc(33.33% - var(--gap) / 2); // improve calculation background-color: red; } .item2 { width: calc(66.66% - var(--gap) / 2);// improve calculation background-color: green; } .item3 { width: 100%; background-color: blue; }

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

Answer 4

这是一个不需要大量代码和麻烦的 CSS 网格用例：

 .container { max-width: 200px; display: grid; grid-template-columns: 1fr 2fr; grid-auto-rows:200px; gap: 12px; } .item1 { background-color: red; } .item2 { background-color: green; } .item3 { grid-column: 1/-1; background-color: blue; }

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