Flexbox: 4 Artikel pro Zeile

Du hast flex-wrap: wrap auf dem Behälter. Das ist gut, denn es überschreibt den Standardwert, die nowrap (Quelle). Dies ist der Grund Elemente nicht umbrechen, um ein Gitternetz in einige Fälle.

In diesem Fall, das Hauptproblem ist flex-grow: 1 auf der flex-Elemente.

Den flex-grow Eigenschaft nicht eigentlich Größe flex-Elemente. Seine Aufgabe ist das verteilen von gratis-Speicherplatz im container (Quelle). Also, egal wie klein der Bildschirm-Größe, wird jedes Element erhalten Sie einen proportionalen Teil des freien Speicherplatzes auf der Linie.

Konkret gibt es acht flex-Elementen in Ihrem container. Mit flex-grow: 1, jeder erhält 1/8 des freien Speicherplatzes auf der Linie. Da es keine Inhalte in Ihrem Elemente, Sie können schrumpfen auf null Breite und wickeln.

Die Lösung ist die Definition einer Breite, die auf die Elemente. Versuchen Sie dies:

CSS:

.parent {
  display: flex;
  flex-wrap: wrap;
}

.child {
  flex: 1 0 21%; /* explanation below */
  margin: 5px;
  height: 100px;
  background-color: blue;
}

HTML:

<div class="parent">
  <div class="child"></div>
  <div class="child"></div>
  <div class="child"></div>
  <div class="child"></div>
  <div class="child"></div>
  <div class="child"></div>
  <div class="child"></div>
  <div class="child"></div>
</div>

Mit flex-grow: 1 definiert in der flex Kurzform, es gibt keine Notwendigkeit für flex-basis zu 25%, das würde tatsächlich dazu führen, die drei Elemente pro Zeile aufgrund der Ränder.

Seit flex-grow verbrauchen Speicherplatz auf der Zeile flex-basis muss nur groß genug sein, um durchzusetzen, ein wrap. In diesem Fall, mit flex-basis: 21%, es gibt viel Platz für die Ränder, aber nie genug Platz für eine fünfte Element.

Hier ist ein weiterer apporach.

Können Sie erreichen es auf diese Weise zu:

.parent{
  display: flex;
  flex-wrap: wrap;
}

.child{
  width: 25%;
  box-sizing: border-box;
}

Beispiel:
https://codepen.io/capynet/pen/WOPBBm

Und eine komplette Beispiel:
https://codepen.io/capynet/pen/JyYaba

Ich würde es so machen mit negativen Margen und calc für die Dachrinnen:

.parent {
  display: flex;
  flex-wrap: wrap;
  margin-top: -10px;
  margin-left: -10px;
}

.child {
  width: calc(25% - 10px);
  margin-left: 10px;
  margin-top: 10px;
}

Demo: https://jsfiddle.net/9j2rvom4/

Alternative CSS-Grid-Methode:

.parent {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-column-gap: 10px;
  grid-row-gap: 10px;
}

Demo: https://jsfiddle.net/jc2utfs3/

Ich glaube, dieses Beispiel ist mehr barebones und einfacher zu verstehen dann @dowomenfart.

.child {
    display: inline-block;
    margin: 0 1em;
    flex-grow: 1;
    width: calc(25% - 2em);
}

Dieser führt die gleiche Breite Berechnungen beim schneiden direkt auf das Fleisch. Die Mathematik ist einfacher und em ist die der neue standard aufgrund seiner Skalierbarkeit und mobile-Freundlichkeit.

Hier ist ein weiterer Weg, ohne mit calc().

//4 PER ROW
//100 divided by 4 is 25. Let's use 21% for width, and the remainder 4% for left & right margins...
.child {
  margin: 0 2% 0 2%;
  width: 21%;
}

//3 PER ROW
//100 divided by 3 is 33.3333... Let's use 30% for width, and remaining 3.3333% for sides (hint: 3.3333 /2 = 1.66666)
.child {
  margin: 0 1.66666% 0 1.66666%;
  width: 30%;
}

//and so on!

Das ist alles dort ist zu ihm. Sie bekommen Lust mit den Dimensionen zu bekommen, eine ästhetische Größen, aber das ist die Idee.