使用 flexbox 连续调整 3 个框

Question

我想连续放置 3 个 Box，第二行再放置 3 个。如果我不添加 margin: 2px; 和 width: calc(33%-4px);，这工作正常。但是，如果我添加 margin: 2px; 并将宽度调整为 width: calc(33% - 4px);，那么所有内容都会出现在同一行中。请让我知道我在这里使用 width calc 方法做错了什么。

代码不正确 -

.container { display: flex; flex-wrap: wrap; }
.box { 
  flex-grow: 1; 
  width: calc(33%-4px); 
  height: 100px; 
  background: green;
  margin: 2px;
 }

<div class="container">
  <div class="box">Box 1</div>
  <div class="box">Box 2</div>
  <div class="box">Box 3</div>
  <div class="box">Box 4</div>
  <div class="box">Box 5</div>
  <div class="box">Box 6</div>
</div>

工作代码-

.container { display: flex; flex-wrap: wrap; }
.box { 
  flex-grow: 1; 
  width: 33%; 
  height: 100px; 
  background: green;
 }

<div class="container">
  <div class="box">Box 1</div>
  <div class="box">Box 2</div>
  <div class="box">Box 3</div>
  <div class="box">Box 4</div>
  <div class="box">Box 5</div>
  <div class="box">Box 6</div>
</div>

Answer 1

margin 应该匹配 calc(100% - <this value here>px)
另请注意空格是 calc(<value>(space)<operator>(space)<value>) 工作所必需的！

.container { display: flex; flex-wrap: wrap; }
.box { 
  flex-grow: 1; 
  width: calc(33% - 2px); 
  margin: 2px;
  height: 100px; 
  background: green;
 }

<div class="container">
  <div class="box">Box 1</div>
  <div class="box">Box 2</div>
  <div class="box">Box 3</div>
  <div class="box">Box 4</div>
  <div class="box">Box 5</div>
  <div class="box">Box 6</div>
</div>

Answer 2

改变

width: calc(30%-4px)

至

width: calc(30% - 4px);

使用 flexbox 连续调整 3 个框

Adjust 3 box in a row using flexbox

html

css

flexbox

css-calc