html - 使用 flexbox 连续调整 3 个框

Question

这个问题在这里已经有了答案:





Why the CSS calc() function is not working?

(1 个回答)


去年关闭。




我想连续放置 3 个 Box，第二行再放置 3 个。如果我不添加 margin: 2px;，这工作正常和 width: calc(33%-4px); .但是如果我添加 margin: 2px;并将宽度调整为 width: calc(33% - 4px);那么所有人都在同一排。请让我知道我在这里做错了什么宽度 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>