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

【问题标题】：100% total width for flex items in flex container, with gap inbetween弹性容器中弹性项目的 100% 总宽度，中间有间隙
【发布时间】：2021-11-05 22:04:08
【问题描述】：

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

理想的显示方式是：

在第一行，蓝色框占据整个宽度，没有任何间隙
第二排红框占前 33%，绿框占剩余 66%
两行之间应该有 12px 的间距
Red 和 Green 项目之间应该有 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>

【问题讨论】：

您可以使用gap 它适用于 flexbox，但请check 支持我可以使用。其他方法 - 为元素使用边距
差距在起作用，但 flex-wrap 是有问题的

标签： css

【解决方案1】：

我添加了一个 flex-direction: 行，删除了填充并为宽度添加了一个计算函数，并将 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>

【讨论】：

我需要填充，它是故意的
你也许可以使用边距，否则只需减去 calc 函数中的填充
我想过这种方法，但它变得太复杂了

【解决方案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>

【讨论】：

【解决方案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>

【讨论】：

【解决方案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>

【讨论】：