Gaps between items only

问题

I need flex items with vertical gaps (10px) between items. Without gaps around.

Solution with .container {margin: 0 -5px} is not good, it makes horizontal scrollbar for some reason.

No responsive breakpoints please.

Code on Codepen

Here is my code without gap:

.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>

回答1:

To accomplish that, w/o using a script or media query, you will need a minor markup change.

With the extra wrapper you then compensate the left margin set on the items, so it will only be visible when wrapped.

Note, this trick is well known, since more or less all frameworks, like Bootstrap etc., use this to accomplish the same in their solutions. CSS Grid can do this much simpler, though due to lack of browser support, this is what's mostly used today.

Updated codepen

Stack snippet

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  */
}

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

回答2:

Flexbox is not really the best solution when gutters are important. It doesn't provide a natural method for creating gaps between items, without applying those gaps between items and the container. You would need to add general CSS and/or JS to make it work.

However, gutters are not a problem in CSS Grid Layout, which provides specific properties for horizontal and vertical gaps:

• row-gap
• column-gap
• gap (the shorthand for both)

These properties create space between grid items, but not between items and the container.

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

The row-gap and column-gap properties (and their gap shorthand), when specified on a grid container, define the gutters between grid rows and grid columns.

NOTE that the CSS Grid spec was recently revised. These properties were previously listed as grid-column-gap, grid-row-gap and grid-gap (reference).

.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;
}

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

revised codepen

回答3:

There's probably a cleaner way to do it, but I guess this is sort of what you're looking for: 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>

来源：https://stackoverflow.com/questions/48523794/gaps-between-items-only