Question

我需要在项目之间具有垂直间隙（10px）的弹性项目。没有间隙。

使用.container {margin: 0 -5px}的解决方案并不好，它出于某种原因会生成水平滚动条。

请不要回复断点。

这是我的代码没有差距：

.container {
  max-width:700px;
  margin:20px auto;
  display:flex;
  flex-direction:row;
  flex-wrap: wrap;
}
div > div {
  min-width:300px;
  background:lightblue;
  border:1px solid blue;
  flex-grow: 1;
  margin:5px 0px;
  padding:10px;
}

<div class="container">
  <div>one</div>
  <div>two</div>
  <div>three</div>
  <div>four</div>
  <div>five</div>
</div>

Answer 1

要实现这一点，不使用脚本或媒体查询，您将需要进行较小的标记更改。

使用额外的wrapper，您可以补偿项目上设置的左边距，所以它只有在包裹时才能看到。

注意，这个技巧众所周知，因为或多或少所有框架，如Bootstrap等，都使用它来在他们的解决方案中实现相同的功能。 CSS Grid可以做得更简单，但由于缺乏浏览器支持，这就是今天最常用的。

Updated codepen

Stack snippet

＆＃13;

body {
  margin: 0;
  background: black;
}

.container {
  max-width: 700px;
  margin: 20px auto;
  overflow: hidden;           /*  added  */
}

.wrapper {
  display: flex;
  /*flex-direction:row;           default, not needed  */
  flex-wrap: wrap;
  margin-left: -10px;         /*  compensate for item margin  */
}

.wrapper div {
  min-width: 300px;
  background: lightblue;
  border: 1px solid blue;
  flex-grow: 1;
  padding: 10px;
  margin-left: 10px;          /*  added left margin  */
}

＆＃13;

<div class="container">
  <div class="wrapper">
    <div>one</div>
    <div>two</div>
    <div>three</div>
    <div>four</div>
    <div>five</div>
  </div>
</div>

＆＃13;

Answer 2

当排水沟很重要时，Flexbox并不是最佳解决方案。它没有提供在项目之间创建间隙的自然方法，而不会在项目和容器之间应用这些间隙。您需要添加通用CSS和/或JS才能使其正常工作。

但是，CSS Grid Layout中的排水沟不是问题，它为水平和垂直间隙提供了特定的属性：

row-gap
column-gap
gap（两者的简写）

这些属性在网格项之间创建空间，但不在项和容器之间创建空间。

10.1. Gutters: the row-gap, column-gap, and gap properties

row-gap和column-gap属性（及其gap简写），在网格容器上指定时，定义网格行和网格列之间的装订线。

注意最近修订了CSS Grid规范。这些属性以前列为grid-column-gap，grid-row-gap和grid-gap（reference）。

＆＃13;

.wrapper {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  column-gap: 10px;
}

.wrapper > div {
  background: lightblue;
  border: 1px solid blue;
  padding: 10px;
}

body {
  margin: 0;
  background: black;
}

.container {
  max-width: 700px;
  margin: 20px auto;
}

＆＃13;

<div class="container">
  <div class="wrapper">
    <div>one</div>
    <div>two</div>
    <div>three</div>
    <div>four</div>
    <div>five</div>
  </div>
</div>

＆＃13;

revised codepen

Answer 3

可能有一种更简洁的方法，但我想这就是你要找的东西：https://codepen.io/anon/pen/gvbWyL

body {
  margin:0;
  background:black;
}

.columns__left {
  margin-bottom: 5px;
  margin-right: 5px;
}

.columns__right {
  margin-bottom: 5px;
  margin-left: 5px;
}

.container {
  max-width:700px;
  margin:20px auto;
  display:flex;
  flex-direction:row;
  flex-wrap: wrap;
}

div > div {
  min-width:300px;
  background:lightblue;
  border:1px solid blue;
  flex-grow: 1;
  padding:10px;
}

@media only screen and (max-width: 653px){
.columns__left {
   margin: 0;
  }
.columns__right {
  margin: 0;
  }
}

<div class="container">
  <div class="columns__left">one</div>
  <div class="columns__right">two</div>
  <div class="columns__left">three</div>
  <div class="columns__right">four</div>
  <div>five</div>
</div>

仅限项目之间的差距

3 个答案: