CSS Flexbox Gap - 影响宽度计算的间隙值[重复]

Posted 2023-03-05

【中文标题】CSS Flexbox Gap - 影响宽度计算的间隙值[重复]

【英文标题】：CSS Flexbox Gap - gap value affecting width calculation [duplicate]

【发布时间】：2021-09-01 13:22:51

【问题描述】：

我正在使用 flexbox 和新的 gap 函数在项目之间添加一些空间。我试图每行有 4 个项目，所以将项目宽度设置为 25% 像这样......

.container 
  display: flex;
  max-width: 800px;
  width: 100%;
  background: gold;
  flex-wrap: wrap;
  gap: 20px;


.item 
  width: 25%;
  background: teal;

<div class="container">

  <div class="item">
    Item 1
  </div>
  
  <div class="item">
    Item 2
  </div>
  
  <div class="item">
    Item 3
  </div>
  
  <div class="item">
    Item 4
  </div>
  
  <div class="item">
    Item 5
  </div>
  
  <div class="item">
    Item 6
  </div>
  
</div>

但是这给了我每行 3 个项目，我认为这是因为它在计算宽度时考虑了 gap 值。

我该如何解决这个问题？

【问题讨论】：

重复处理margin但问题和gap一样

【参考方案1】：

您可以从宽度中减去间隙。 20px 间隙 * 3 / 4（列）

.item 
   width: calc(25% - 15px);
   background: teal;

【讨论】：

我喜欢这个，而不是我本来可以接近它的方式，但效果非常好

【参考方案2】：

您可以在 CSS 自定义属性中定义间隙，然后通过一些数学计算项目的宽度。

.container 
  --gap: 20px;
  --columns: 4;
  display: flex;
  max-width: 800px;
  width: 100%;
  background: gold;
  flex-wrap: wrap;
  gap: var(--gap);


.item 
  width: calc((100% / var(--columns)) - var(--gap) + (var(--gap) / var(--columns)));
  background: teal;

<div class="container">

  <div class="item">
    Item 1
  </div>
  
  <div class="item">
    Item 2
  </div>
  
  <div class="item">
    Item 3
  </div>
  
  <div class="item">
    Item 4
  </div>
  
  <div class="item">
    Item 5
  </div>
  
  <div class="item">
    Item 6
  </div>
  
</div>

【讨论】：

我还没有听说过自定义 css 属性，将做一些阅读。谢谢指点

【参考方案3】：

考虑这种其他方法，它更容易。只需输入间隙值即可。

.container 
  display: grid;
  grid-template-columns: auto auto auto auto;
  max-width:800px;
  background-color:gold;
  gap:20px;


/* -- Select all <div> elements within the container -- */
.container > div 
  background-color: teal;

<div class="container">

  <div>Item 1</div>
  <div>Item 2</div>
  <div>Item 3</div>
  <div>Item 4</div>
  <div>Item 5</div>
  <div>Item 6</div>

</div>