it-swarm.com.de

Flexbox: 4 Artikel pro Reihe

Ich verwende eine Flexbox, um 8 Elemente anzuzeigen, deren Größe sich dynamisch mit meiner Seite ändert. Wie kann ich erzwingen, dass die Elemente in zwei Zeilen aufgeteilt werden? (4 pro Reihe)?

Hier ist ein relevanter Ausschnitt:

(Oder wenn Sie jsfiddle bevorzugen - http://jsfiddle.net/vivmaha/oq6prk1p/2/ )

.parent-wrapper {
  height: 100%;
  width: 100%;
  border: 1px solid black;
}
.parent {
  display: flex;
  font-size: 0;
  flex-wrap: wrap;
  margin: -10px 0 0 -10px;
}
.child {
  display: inline-block;
  background: blue;
  margin: 10px 0 0 10px;
  flex-grow: 1;
  height: 100px;
}
<body>
  <div class="parent-wrapper">
    <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>
  </div>
</body>
183
Vivek Maharajh

Du hast flex-wrap: wrap auf dem Container. Das ist gut, weil es den Standardwert überschreibt, der nowrap ( source ) ist. Dies ist der Grund, warum Elemente in einigen Fällen nicht zu einem Raster umgebrochen werden .

In diesem Fall ist das Hauptproblem flex-grow: 1 bei den flexiblen Elementen.

Die flex-grow -Eigenschaft passt die Größe von flexiblen Elementen nicht an. Seine Aufgabe ist es, freien Speicherplatz im Container zu verteilen ( Quelle ). Egal wie klein die Bildschirmgröße ist, jedes Element erhält einen proportionalen Teil des freien Platzes in der Zeile.

Insbesondere befinden sich acht flexible Artikel in Ihrem Container. Mit flex-grow: 1 erhält jeder 1/8 des freien Platzes in der Zeile. Da Ihre Artikel keinen Inhalt enthalten, können sie auf die Breite Null verkleinert werden und werden niemals umgebrochen.

Die Lösung besteht darin, eine Breite für die Elemente zu definieren. Versuche dies:

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

.child {
  flex: 1 0 21%; /* explanation below */
  margin: 5px;
  height: 100px;
  background-color: blue;
}
<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>

Wenn flex-grow: 1 in der Kurzform flex definiert ist, muss flex-basis nicht 25% betragen, was aufgrund der Ränder tatsächlich zu drei Elementen pro Zeile führen würde.

Da flex-grow freien Platz in der Zeile beansprucht, muss flex-basis nur groß genug sein, um einen Zeilenumbruch zu erzwingen. In diesem Fall ist mit flex-basis: 21% viel Platz für die Ränder, aber nie genug Platz für ein fünftes Element.

257
Michael_B

Fügen Sie den .child -Elementen eine Breite hinzu. Ich persönlich würde Prozentsätze für den margin-left verwenden, wenn Sie es immer 4 pro Zeile haben möchten.

DEMO

.child {
    display: inline-block;
    background: blue;
    margin: 10px 0 0 2%;
    flex-grow: 1;
    height: 100px;
    width: calc(100% * (1/4) - 10px - 1px);
}
94
dowomenfart

Hier ist ein anderer Ansatz.

Sie können es auch auf diese Weise erreichen:

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

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

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

Und ein vollständigeres Beispiel: https://codepen.io/capynet/pen/JyYaba

36
Capy
<style type="text/css">
.parent{
    display: flex;
    flex-wrap: wrap;
}
.parent .child{
    flex: 1 1 25%;
}
</style>    
<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>

Ich hoffe es hilft. Für weitere Informationen folgen Sie diesem Link

11
Muddasir Abbas

Ich würde es so machen, indem ich negative Ränder benutze und für die Dachrinnen berechne:

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

9
shanomurphy
.parent-wrapper {
        height: 100%;
        width: 100%;
        border: 1px solid black;
}
        .parent {
        display: flex;
        font-size: 0;
        flex-wrap: wrap;
        margin-right: -10px;
        margin-bottom: -10px;
}
        .child {
        background: blue;
        height: 100px;
        flex-grow: 1;
        flex-shrink: 0;
        flex-basis: calc(25% - 10px);
}
        .child:nth-child(even) {
        margin: 0 10px 10px 10px;
        background-color: Lime;
}
        .child:nth-child(odd) {
        background-color: orange; 
}
<!DOCTYPE html>
<html lang="en">
<head>
        <meta charset="UTF-8">
        <title>Document</title>
        <style type="text/css">

        </style>
</head>
<body>
  <div class="parent-wrapper">
    <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>
  </div>
</body>
</html>

;)

Ich glaube, dieses Beispiel ist mehr Barebones und leichter zu verstehen als @dowomenfart.

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

Dies führt die gleichen Breitenberechnungen durch, während direkt zum Fleisch geschnitten wird. Die Mathematik ist viel einfacher und em ist der neue Standard aufgrund seiner Skalierbarkeit und Benutzerfreundlichkeit.

1
Joseph Cho

Flex Wrap + negativer Rand

Warum flex vs. display: inline-block?

Warum negative Marge?

Entweder verwenden Sie SCSS oder CSS-in-JS für die Edge-Fälle (d. H. Das erste Element in der Spalte), oder Sie legen einen Standardrand fest und entfernen den äußeren Rand später.

Implementierung

https://codepen.io/zurfyx/pen/BaBWpja

<div class="outerContainer">
    <div class="container">
        <div class="elementContainer">
            <div class="element">
            </div>
        </div>
        ...
    </div>
</div>
:root {
  --columns: 2;
  --betweenColumns: 20px; /* This value is doubled when no margin collapsing */
}

.outerContainer {
    overflow: hidden; /* Hide the negative margin */
}

.container {
    background-color: grey;
    display: flex;
    flex-wrap: wrap;
    margin: calc(-1 * var(--betweenColumns));
}

.elementContainer {
    display: flex; /* To prevent margin collapsing */
    width: calc(1/var(--columns) * 100% - 2 * var(--betweenColumns));
    margin: var(--betweenColumns);
}

.element {
    display: flex;
    border: 1px solid red;
    background-color: yellow;
    width: 100%;
    height: 42px;
}
0
zurfyx