框

Question

我在框中的对象之间存在间距问题。

我有一个带有物品的容器：

＆＃13;

＆＃13;

.container {
  display: flex;
  justify-content: space-between;
}

＆＃13;

<div class="container">
  <div class='box'></div>
  <div class='box'></div>
  <div class='box'></div>
  <div class='box'></div>
  <div class='box'></div>
  <div class='box'></div>
</div>

＆＃13;

＆＃13;

＆＃13;

但是当我添加更多对象或调整窗口大小时，它会破坏响应能力。 我希望连续获得3个或更多。容器将flex-wrap。并且连续的每个第一个和最后一个框在与框的接触点处没有间距/边距，如下图所示。

我尝试了justify-content: space-between，禁用了保证金等。

有没有办法轻松让它响应？

Answer 1

将CSS放在下面希望它能正常工作。

＆＃13;

＆＃13;

*{
  box-sizing:border-box;
}
body,html{
  width:100%;

}
.container {
  width:90%;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  border: 1px solid blue;
  flex-wrap:wrap;
  margin:0 auto;
  padding:0;
}

.box {
  flex: 1 0 calc(33.3333% - 2rem - 2px);
  border: 1px solid red;
  padding: 10px;
  margin:15px 0;
  height:150px;
  min-width:150px;
  display:inline-flex;
  align-items:center;
  justify-content:center
}

@media only screen and (min-width:576px){
  .container{
    flex-wrap:wrap;
    display:
  }
  .box:nth-child(3n-1){
  margin-left:2%;
  margin-right:2%;
}
} 

＆＃13;

<div class="container">
  <div class="box">1</div>
  <div class="box">2</div>
  <div class="box">3</div>
  <div class="box">4</div>
  <div class="box">5</div>
  <div class="box">6</div>
  <div class="box">7</div>
  <div class="box">8</div>
  <div class="box">9</div>
</div>

＆＃13;

＆＃13;

＆＃13;

Answer 2

.container {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  border: 1px solid blue;
}

.box {
  flex: 1 1 25%;
  border: 1px solid red;
  padding: 20px;
  margin: 10px;
}

<div class="container">
  <div class='box'>1</div>
  <div class='box'>2</div>
  <div class='box'>3</div>
  <div class='box'>4</div>
  <div class='box'>5</div>
  <div class='box'>6</div>
  <div class='box'>7</div>
  <div class='box'>8</div>
  <div class='box'>9</div>
</div>

我希望我能正确理解你的问题，你想要有边距:)如果你打开整页的片段，你可以玩屏幕大小，看看div是如何工作的。