如何使用CSS将三个项目连续设置为33.3％的三个项目？弯曲或网格（没关系）

Question

这是所有代码示例 - ＆gt;

https：//codepen.io/mihailovic-aio/mihailovic-aleksandar/pen/pen/pen/pen/pen/pen/eyvrewe

需要？首先，我有边距，负边缘的问题。 我需要全宽度为33.3％，

以解决负边距。

我希望每个项目恰好是33.3％，并且要全长。目前对我来说是32％，如果我将其设置为33.3％，那是一条新线路的捷径。

.container {
  display: flex;
  flex-wrap: wrap;
  height: 165px;
  width: 100%;
}

.item {
  background: red;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32%;
  height: 75px;
  background: #f4f4f4;
  margin: 3px;
  border-radius: 10px;
}

<div class="container">
  <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>

Answer 1

即使是的3px 保证金的3px ，当使用width：33％时，您的flex项目包裹也将使您的flex项目包裹到新行。您可以使用宽度：calc（100％/3）使其完全33.33％，但您必须删除静态的左右Margin。

.container {
  display: flex;
  flex-wrap: wrap;
  height: 165px;
  width: 100%;
}

.item {
  background: red;
  display: flex;
  align-items: center;
  justify-content: center;
  width: calc(100%/3);
  margin: auto auto .5em auto;
  height: 75px;
  background: #f4f4f4;
}

<div class="container">
  <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>

如果要有间距，则可以使用宽度：calc（100％/3.1） on intem with rangin：auto，因此它们以中心为中心。 .1帐户有一些间距。另一个选项是使用宽度：calc（100％/3-6px）;来考虑保证金：3px;。

.container {
  display: flex;
  flex-wrap: wrap;
  height: 165px;
  width: 100%;
}

.item {
  background: red;
  display: flex;
  align-items: center;
  justify-content: center;
  width: calc(100%/3 - 6px); /* -6px accounts for margin: 3px; i.e., top + bottom at 3px = 6px */
  margin: 3px;
  height: 75px;
  background: #f4f4f4;
}

<div class="container">
  <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>

Answer 2

如果要包含边距（尽管您应该在边距上包括一个差距），则需要使用calc（33.33％-6px）作为宽度

.container {
    display: flex;
    flex-wrap :wrap;
    height: 165px;
    width: 100%;
}

.item {
  background: red;
   display: flex;
  align-items: center;
  justify-content: center;
  width: calc(33.33% - 6px);
  height: 75px;
  background: #f4f4f4;
  margin: 3px;
  border-radius: 10px;
}

<div class="container">
  <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>

Answer 3

您可以将容器用于项目，并给它们宽度：33.33％并将保证金设置为您的项目。

这是基于您的笔的示例：

.container {
  display: flex;
  flex-wrap :wrap;
  height: 165px;
  width: 100%;
}
.item-container {
  display: flex;
  width: 33.33%;
  height: 75px;
}
.item{  
  width:100%;
  margin: 3px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #f4f4f4;
  border-radius: 10px;
}

<div class="container">
  <div class="item-container">
    <div class="item">1</div>
  </div>
  <div class="item-container">
    <div class="item">2</div>
  </div>
  <div class="item-container">
    <div class="item">3</div>
  </div>
  <div class="item-container">
    <div class="item">4</div>
  </div>
  <div class="item-container">
    <div class="item">5</div>
  </div>
  <div class="item-container">
    <div class="item">6</div>
  </div>
  <div class="item-container">
    <div class="item">7</div>
  </div>
</div>