Flexbox: 4 Artikel pro Reihe

Lesezeit: 7 Minuten

Flexbox 4 Artikel pro Reihe
V Maharajh

Ich verwende eine Flexbox, um 8 Elemente anzuzeigen, deren Größe dynamisch mit meiner Seite geändert wird. Wie erzwinge ich es, die Elemente in zwei Reihen aufzuteilen? (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>

  • [Update] Diese Frage basierte auf einem schlechten, nicht reagierenden Design. Wenn Sie feststellen, dass Sie eine der folgenden Antworten verwenden, seien Sie vorsichtig. In einem guten Design hätten Sie mehr Elemente auf breiteren Bildschirmen und weniger auf kleineren Bildschirmen. Das Erzwingen von 4 Elementen für alle Bildschirmgrößen wird nur auf einem engen Bereich von Bildschirmbreiten ansprechend aussehen.

    – V Maharajh

    2. Februar 2018 um 16:27 Uhr

Flexbox 4 Artikel pro Reihe
Michael Benjamin

Du hast flex-wrap: wrap auf dem Behälter. Das ist gut, denn es überschreibt den Standardwert, der lautet nowrap (Quelle). Dies ist der Grund, warum Elemente in einigen Fällen nicht zu einem Raster umbrochen werden.

In diesem Fall ist das Hauptproblem flex-grow: 1 auf den Flex-Artikeln.

Die flex-grow Eigenschaft nicht wirklich Größe Flex-Elemente. Seine Aufgabe ist es, freien Speicherplatz im Container zu verteilen (Quelle). Unabhängig davon, wie klein die Bildschirmgröße ist, erhält jedes Element einen proportionalen Teil des freien Platzes auf der Linie.

Genauer gesagt, es gibt acht Flex-Gegenstände in Ihrem Container. Mit flex-grow: 1erhält jeder 1/8 des freien Platzes auf der Zeile. Da Ihre Artikel keinen Inhalt enthalten, können sie auf eine Breite von null schrumpfen und werden niemals umbrochen.

Die Lösung besteht darin, eine Breite für die Artikel 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>

Mit flex-grow: 1 definiert in der flex Kurzschrift, es besteht keine Notwendigkeit für flex-basis 25% betragen, was aufgrund der Ränder eigentlich drei Positionen pro Zeile ergeben würde.

Seit flex-grow wird freien Speicherplatz in der Zeile verbrauchen, flex-basis muss nur groß genug sein, um eine Umhüllung zu erzwingen. In diesem Fall mit flex-basis: 21%gibt es viel Platz für die Ränder, aber nie genug Platz für ein fünftes Element.

  • Ich mag das, weil es für mich funktioniert hat, aber „viel Platz“ macht mich ein wenig unruhig. Gibt es ein winziges Fenster oder eine Situation, in der diese „Schätzung“ mich im Stich lassen könnte?

    – Jackson

    1. Mai 2018 um 21:07 Uhr

  • „Wenn Sie sehr große Ränder einfügen, kann das Layout brechen.“ Das ist ein Beispiel für ein Szenario, das ich vermeiden möchte. Praktikabilität ist mir egal; unterhalte meine Anbetung für Perfektion. Gibt es eine Möglichkeit, genauer zu sein?

    – Jackson

    2. Mai 2018 um 16:01 Uhr

  • Sie können auch verwenden flex: 1 0 calc(25% - 10px);

    – MarkG

    19. Juli 2018 um 18:51 Uhr

  • Gute Antwort! Eine kleine Verbesserung, die ich verwende, ist margin: 2%; statt einer festen Pixelzahl, um zu verhindern, dass die Kästchen bei kleinen Geräten/Auflösungen in eine neue Zeile springen. Die allgemeine Formel lautet (100 - (4 * box-width-percent)) / 8% für unterschiedliche Kartonbreiten

    – thomaspsk

    18. Februar 2019 um 17:27 Uhr

  • Falls es jemand vergisst, die flex-Eigenschaft ist hier eine Abkürzung für flex-grow: 1; Flex-Schrumpf: 0; Flex-Basis: 21 %;

    – MrAn3

    11. September 2020 um 15:34 Uhr


1646257929 614 Flexbox 4 Artikel pro Reihe
Frauenfurz

Fügen Sie eine Breite hinzu .child Elemente. Ich persönlich würde Prozentsätze auf die verwenden margin-left wenn du es haben willst immer 4 pro Reihe.

DEMO

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

  • Gute Idee. Ich habe diese Idee mit geringfügigen Änderungen verwendet. jsfiddle.net/vivmaha/oq6prk1p/6

    – V Maharajh

    9. April 2015 um 20:46 Uhr

  • Ah. Das löst mein Problem eigentlich nicht. Siehe hier für ein Beispiel: jsfiddle.net/vivmaha/oq6prk1p/7. Ich habe nicht die Freiheit, Prozentsätze für meine Marge zu verwenden. Sie müssen eine feste Breite haben. Das bedeutet, dass die magischen 23 %, die wir gewählt haben, nicht funktionieren, da sie die feste Marge nicht berücksichtigen.

    – V Maharajh

    9. April 2015 um 21:29 Uhr

  • Ja, calc löst es! ‘calc(100% * (1/4) – 10px – 1px)’. Sehen jsfiddle.net/vivmaha/oq6prk1p/9

    – V Maharajh

    9. April 2015 um 23:36 Uhr

  • Was nützt dann noch Flex?

    – zweimal jr

    29. November 2016 um 21:41 Uhr

  • Was ist mit responsivem Design? Wir wollen dem Kind keine feste Weite auferlegen

    – Kerzenhalter

    26. Dezember 2017 um 4:32 Uhr

Flexbox 4 Artikel pro Reihe
Kapy

Hier ist ein weiterer Ansatz.

Sie können es auch auf diese Weise erreichen:

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

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

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

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

  • Was ist, wenn ich weniger als 4 Kinder habe? Ich mag diesen leeren leeren Raum nicht, das Kind reagiert nicht …

    – Kerzenhalter

    26. Dezember 2017 um 4:35 Uhr

  • Die andere Antwort von Muddasir Abbas verwendet nur Flex-Einstellungen, daher denke ich, dass es eine sauberere Lösung ist.

    – Andreas Köster

    3. Januar 2019 um 0:56 Uhr

Ich würde es so machen, indem ich negative Ränder verwende 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/

1646257930 893 Flexbox 4 Artikel pro Reihe
Muddasir Abbas

Für weitere Details können Sie diesem folgen Verknüpfung

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

.parent .child{ 
  flex: 1 1 25%;
  /*Start Run Code Snippet output CSS*/
  padding: 5px; 
  box-sizing: border-box;
  text-align: center;
  border: 1px solid #000;
  /*End Run Code Snippet output CSS*/
}
<div class="parent">
  <div class="child">1</div>
  <div class="child">2</div>
  <div class="child">3</div>
  <div class="child">4</div>
  <div class="child">5</div>
  <div class="child">6</div>
  <div class="child">7</div>
  <div class="child">8</div>
</div>

  • Vielen Dank, um die Anzahl der Spalten, die Sie können, einfach zu steuern flex: 1 1 calc(100% / 6)

    – Zanderkrieg

    13. Oktober 2021 um 3:33 Uhr

1641741396 454 Wie kann ich Elemente nebeneinander anzeigen ohne Tabellen zu verwenden
Josef Cho

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

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

Dadurch werden die gleichen Breitenberechnungen durchgeführt, während direkt zum Fleisch geschnitten wird. Die Mathematik ist viel einfacher und em ist der neue Norm aufgrund seiner Skalierbarkeit und Mobilfreundlichkeit.

  • Vielen Dank, um die Anzahl der Spalten, die Sie können, einfach zu steuern flex: 1 1 calc(100% / 6)

    – Zanderkrieg

    13. Oktober 2021 um 3:33 Uhr

1646257931 843 Flexbox 4 Artikel pro Reihe
Mateus Manosso Barszcz

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

😉

  • Wenn Sie bitte etwas Kontext hinzufügen können, warum dies die OP-Frage beantwortet, anstatt nur Code zu posten.

    – d219

    31. März 2018 um 19:51 Uhr

  • wenn du hinzufügst justify-content: space-evenly; an die prent, dann richten sie sich gut aus und Sie müssen das nicht tun calc auf das Kind. Danke aber für das Beispiel!

    – Mattijs

    14. Juni 2018 um 9:15 Uhr

916490cookie-checkFlexbox: 4 Artikel pro Reihe

This website is using cookies to improve the user-friendliness. You agree by using the website further.

Privacy policy