当项目有边距和边框时，如何使用 flex 每行设置 3 个项目

Question

我想每行设置 3 个项目。我尝试过类似的方法，但是，由于边距和边框，现在我每行有 2 个项目。我应该如何实现它以每行始终有 3 个项目

.App {
  height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.parent {
  width: 600px;
  display: flex;
  flex-wrap: wrap;
}

.item {
  display: flex;
  justify-content: center;
  align-items: center;
  border: 1px solid #000;
  margin: 5px;
  width: 33%;
}

    <div className="App">
      <div className="parent">
        <div className="item">1</div>
        <div className="item">2</div>
        <div className="item">3</div>
        <div className="item">4</div>
        <div className="item">5</div>
        <div className="item">6</div>
        <div className="item">7</div>
        <div className="item">8</div>
        <div className="item">9</div>
        <div className="item">10</div>
      </div>
    </div>
  );

Answer 1

您必须记住边距和边框会扩大 div 的大小。在您的场景中，您已将 div 设置为 33%，这意味着总共 3 个 div 占据了父级宽度的 99%。剩余的 1% 不足以用于所有边距和边框。

我的建议是将 div 大小设置为 30% 左右，或者使用填充而不是边距。

Answer 2

您可以在 .item 上使用 width: calc(100%/3 - 12px);。

100%/3 将连续做 3 次。那么-12px两边占margin: 5px=10px。然后与 border 相同。 1px 影响 width 的任何一方都会给你 2px。总共 12px.

注意： 您可以在 .item 上使用 box-sizing: border-box; 以避免必须在边框的任一侧使用 1px计算。

.App {
  display: flex;
  justify-content: center;
  flex-direction: column;
  align-items: center;
}

.parent {
  width: 600px;
  display: flex;
  flex-wrap: wrap;
}

.item {
  display: flex;
  justify-content: center;
  align-items: center;
  border: 1px solid #000;
  margin: 5px;
  width: calc(100%/3 - 12px);
  /*box-sizing: border-box; - would make the calc -10px instead of -12px*/
}

<div class="App">
  <div class="parent">
    <div class="item">1</div>
    <div class="item">2</div>
    <div class="item">3</div>
    <div class="item">4</div>
    <div class="item">5</div>
    <div class="item">6</div>
    <div class="item">7</div>
    <div class="item">8</div>
    <div class="item">9</div>
    <div class="item">10</div>
  </div>
</div>

Answer 3

您可以尝试在 item 元素上设置 flex-basis:33% 而不是 width

.item {
  display: flex;
  justify-content: center;
  align-items: center;
  border: 1px solid #000;
  margin: 5px;
  flex-basis: 33%;
}

当项目有边距和边框时，如何使用 flex 每行设置 3 个项目

How to set 3 items per row using flex when item has margin and border

html

css

flexbox