CSS-Kurs / Flexbox: Ausrichtung, Umbruch, gap, grow und shrink

Flexbox kombiniert Ausrichtung, Umbruch und flexible Größenanpassung, um Elemente in den verfügbaren Raum einzupassen. justify-content funktioniert entlang der Hauptachse, align-items funktioniert über sie hinweg, und align-content verteilt mehrere Reihen, wenn es Raum entlang der Querachse gibt.

Ordnen Sie die Ausrichtungseigenschaften ihren Achsen zu

In einer Reihe steuert justify-content hauptsächlich die horizontale Ausrichtung und align-items hauptsächlich die vertikale. Wenn man es auf Spalte ändert, wird die Hauptachse vertikal und die physische Richtung der beiden Eigenschaften ändert sich ebenfalls. Insbesondere muss im Container genügend Platz in der Höhe verbleiben, um justify-content bei Spalten vergleichen zu können. Wenn die Höhe perfekt zum Inhalt passt, gibt es fast keinen Spielraum zur Verschiebung, selbst wenn man es auf center oder space-between ändert. Die Richtung der Achse und die Start-Einstellung des Flex-Containers können in Flexbox-Grundlagen: Container, Elemente und Achsen nachgelesen werden.

justify-content: center platziert eine Gruppe von Elementen in der Mitte, und space-between platziert das erste und das letzte Element an beiden Enden und teilt den Raum dazwischen auf. gap ist der angegebene Abstand, und space-between verteilt den verbleibenden Raum. Wenn sie zusammen verwendet werden, kann der tatsächliche Abstand größer als der gap sein. Wenn das Flex-Wachstum eines Elements den gesamten verbleibenden Raum nutzt oder der automatische Außenabstand in Richtung der Hauptachse Raum einnimmt, kann die Änderung von justify-content möglicherweise nicht sichtbar sein.

align-items: center richtet Elemente unterschiedlicher Höhe innerhalb einer Zeile zentriert aus. align-content: center zentriert alle Zeilen auf der Querachse. Sie sollten die beiden nicht als dieselbe Funktion betrachten. align-content hat keine Wirkung auf einzeilige Container, die nowrap sind, und selbst in Wrap-Containern, wenn der von den Zeilen eingenommene Platz und die Höhe des Containers gleich sind, gibt es keinen Raum für die Ausrichtung. Sie können die Anwendungsbedingungen im Flexbox-Ausrichtungsleitfaden von MDN überprüfen.

Vergleichen Sie die Ausrichtung von Elementen und die Ausrichtung von Zeilen

Speichern Sie den unten stehenden Code als flex-align.html und öffnen Sie ihn. Der erste Abschnitt enthält drei Elemente mit unterschiedlichen Höhen, der zweite Abschnitt vier Elemente in zwei Reihen. Der zweite Container ist 280px hoch, damit Platz für die Ausrichtung der Zeilengruppe bleibt. Bei zu schmalem Fenster passen nicht mehr zwei Elemente nebeneinander; vergleichen Sie die Zweizeilenausrichtung bei ausreichend breitem Fenster.

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>flex-align.html</title>
  <style>
* { box-sizing: border-box; }
body { margin: 16px; font: 16px/1.6 sans-serif; color: #243447; }
h1 { font-size: 24px; } h2 { font-size: 20px; margin-top: 32px; }
a { color: #145f8f; } a:focus-visible { outline: 3px solid #b4470b; outline-offset: 3px; }
.toolbar { display: flex; gap: 12px; justify-content: space-between; align-items: center;
 width: 100%; max-width: 640px; min-height: 120px; border: 2px solid #789; padding: 12px; }
 .toolbar > div { padding: 8px; background: #dceefa; }
 .lines { display: flex; flex-wrap: wrap; gap: 12px; width: min(100%, 360px); height: 280px;
 align-items: center; align-content: flex-start; border: 2px solid #789; padding: 12px; }
 .lines > div { flex: 0 0 140px; padding: 8px; background: #e8f5de; }
 .tall { min-height: 60px; }
  </style>
</head>
<body>
<h1>Alignment on one line and multiple lines</h1>
<h2>Toolbar</h2><div class="toolbar"><div>Short item</div><div>Two-line item<br>Second line</div><div>Button position</div></div>
<h2>Line group</h2><div class="lines"><div>1</div><div class="tall">2<br>Second line</div><div>3</div><div class="tall">4<br>Second line</div></div>
</body>
</html>

1. Ändern Sie justify-content von .toolbar auf center, um zu sehen, ob die drei Elemente in der Mitte zusammenkommen. Vergleichen Sie auch flex-start und setzen es wieder auf space-between zurück. Lassen Sie die Größe der Elemente und den Abstand unverändert.
2. Ändern Sie align-items in .toolbar auf flex-start, um sicherzustellen, dass es oben ausgerichtet ist. Wenn Sie es auf stretch ändern, vergrößern sich die Elemente mit automatischer Größe auf der Querachse. Nach dem Vergleich wird es wieder auf center zurückgesetzt.
3. Ändern Sie nur das align-content von .lines auf center. Ein Bündel aus zwei Linien kommt nach unten, während die Beziehungsstruktur der Elemente jeder Linie erhalten bleibt. Wenn Sie wieder zu flex-start wechseln und nur align-items auf flex-start ändern, ändert sich die Position der kurzen Elemente in jeder Linie.
4. Wenn Sie nur das flex-wrap in .lines auf nowrap ändern, wird alles versuchen, in einer Zeile zu bleiben, und in diesem Beispiel ist das Schrumpfen durch flex-shrink: 0 deaktiviert, wodurch es horizontal überläuft. In diesem Zustand können Sie mehrere Linien nicht mit align-content ausrichten. Nach der Bestätigung stellen Sie es wieder auf wrap zurück.

Verstehen Sie grow, shrink und basis

flex: 1 1 192px gibt in dieser Reihenfolge flex-grow, flex-shrink und flex-basis an. Basis ist die Standardgröße, von der aus die räumliche Verteilung der Hauptachse gestartet wird, und ist kein Wert, der die endgültige Breite garantiert. Wachsen ist das Vergrößerungsverhältnis für den verbleibenden Platz, und Schrumpfen ist das Schrumpfungsverhältnis, wenn der Platz nicht ausreicht. Da es eine ausgelassene Wertregel für einzelne Zahlen oder auto in der Kurzschreibweise gibt, werden drei Werte angegeben und im Lernbeispiel verglichen.

Zum Beispiel, wenn ein Elternteil mit einer Inhaltsbreite von 640px drei Elemente mit Basisgröße 100px und zwei Abstände (jeweils 20px) enthält, beträgt der verbleibende Platz 640 − 300 − 40 = 300px. Wenn das Wachstumsverhältnis 1:2:1 ist, wird der hinzugefügte Platz 75px, 150px und 75px betragen, und die endgültige Breite wird 175px, 250px und 175px sein. Dies ist eine Berechnung von Bedingungen, die keine Mindestinhaltsgröße oder min/max-Beschränkungen beinhalten.

Die Menge der Schrumpfung ist nicht allein anhand der Schrumpfzahl gleichmäßig verteilt. Berücksichtigen Sie sowohl das Reduktionsverhältnis als auch die Referenzgröße. Wenn wir 60px von zwei Elementen mit Standardgrößen von 200px und 100px und beide mit einem Schrumpfwert von 1 reduzieren müssen, würden wir unter einfachen Bedingungen ohne Einschränkungen 40px und 20px reduzieren. Die Ergebnisse können variieren, wenn es Padding, Ränder, minimale Inhaltsgröße usw. gibt, daher sollten Sie die tatsächlich angewendeten Werte überprüfen. MDNs Flex-Beschreibung erklärt Kurzschreibweisen und Größenbedingungen.

Platz verteilen und Karten umbrechen

Speichern Sie den folgenden Code als flex-size.html. Der Berechnungsbereich entspricht der oben genannten Berechnung, indem eine maximale Breite von 640px ohne zusätzliche Auffüllung oder Rahmen erstellt wird. Die Kartenliste verwendet eine Breite von 192px als Standard für Zeilenumbrüche, füllt jedoch den verbleibenden Platz. Wenn eine Liste mit list-style: none außerhalb von nav liegt, wird sie möglicherweise nicht als Liste im Accessibility-Baum von Safari erkannt. Im Beispiel gibt ul role="list" an, um die Listenrolle zu spezifizieren. Barrierefreiheitsbedingungen beim Entfernen von Aufzählungszeichen und Abständen werden ebenfalls in CSS Absatz- und Listenformatierung beschrieben.

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>flex-size.html</title>
  <style>
* { box-sizing: border-box; }
body { margin: 16px; font: 16px/1.6 sans-serif; color: #243447; }
h1 { font-size: 24px; } h2 { font-size: 20px; margin-top: 32px; }
a { color: #145f8f; } a:focus-visible { outline: 3px solid #b4470b; outline-offset: 3px; }
.calc { display: flex; gap: 20px; width: min(100%, 640px); background: #eef2f6; }
 .calc > div { flex: 1 1 100px; min-width: 0; height: 80px; background: #dceefa; }
 .calc > div:nth-child(2) { flex-grow: 2; }
 .cards { display: flex; flex-wrap: wrap; gap: 16px; list-style: none; padding: 0; }
 .cards > li { flex: 1 1 192px; min-width: 0; padding: 16px; background: #e8f5de; overflow-wrap: anywhere; }
  </style>
</head>
<body>
<h1>Flex values ​​and space distribution</h1><div class="calc"><div>grow 1</div><div>grow 2</div><div>grow 1</div></div>
<h2>Wrapping card</h2><ul class="cards" role="list"><li>First card</li><li>Second card</li><li>Third card</li><li>Fourth card</li></ul>
</body>
</html>

1. Erweitern Sie Ihren Browser, sodass die .calc 640px breit ist, und verwenden Sie die Entwicklertools, um die Breiten der drei Elemente zu überprüfen. Sie werden 175px·250px·175px betragen. Wenn Sie nur flex-grow des zweiten Elements auf 1 ändern, werden die drei Elemente jeweils 200px groß. Nach dem Vergleich stellen Sie es wieder auf 2 zurück.
2. Ändern Sie nur flex-grow in .cards > li auf 0, um sicherzustellen, dass die letzte Kartenreihe die zusätzliche Breite nicht ausfüllt. Wenn Sie es auf 1 zurückstellen, erhält auch die letzte Zeile Platz.
3. Verengen Sie den Bildschirm, um zu sehen, ob weniger Karten in eine Reihe passen. wrap bestimmt, welche Zeilen angeordnet werden, und jede Zeile verteilt den verbleibenden Platz separat. Die Kartenbreiten der letzten Reihe und der vorherigen Reihe müssen nicht unbedingt übereinstimmen.
4. Um einen einzelnen Zeilenüberlauf anstelle eines Zeilenumbruchs zu sehen, setzen Sie flex-wrap am Container auf nowrap und flex an den Elementen auf 0 0 192px. Nachdem Sie die beiden Bedingungen überprüft haben, stellen Sie das ursprüngliche wrap und 1 1 192px wieder her.

Automatische Mindestgröße und langen Text überprüfen

Die automatische Mindestbreite von Flex-Elementen kann verhindern, dass Bereiche mit langen Adressen oder Bezeichnern verkürzt werden. min-width: 0 und die Grundlagen zu Überlauf und langen Zeichenfolgen erlauben das Schrumpfen der Box, und overflow-wrap: anywhere erlaubt es, den Text selbst umzubrechen. Das Verkleinern eines Kastens kürzt den Text darin nicht automatisch, daher müssen Sie zwischen den beiden Problemen unterscheiden.

Speichern Sie den folgenden Code als flex-long-text.html. Das Beispiel verwendet eine lange Kennung ohne Leerzeichen und keine echte Adresse. Selbst wenn der Bildschirm verkleinert wird, wird der Text neben dem Anleitungsbereich in mehrere Zeilen unterteilt gelesen. Sie können die Zeilenumbruchregeln in der Beschreibung overflow-wrap von MDN überprüfen.

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>flex-long-text.html</title>
  <style>
* { box-sizing: border-box; }
body { margin: 16px; font: 16px/1.6 sans-serif; color: #243447; }
h1 { font-size: 24px; } h2 { font-size: 20px; margin-top: 32px; }
a { color: #145f8f; } a:focus-visible { outline: 3px solid #b4470b; outline-offset: 3px; }
.notice { display: flex; gap: 12px; max-width: 600px; border: 2px solid #789; padding: 12px; }
 .icon { flex: 0 0 48px; background: #ffe4b5; }
 .text { flex: 1 1 auto; min-width: 0; overflow-wrap: anywhere; background: #dceefa; }
 .text p { margin: 0; }
  </style>
</head>
<body>
<h1>Long strings and minimum sizes</h1><div class="notice"><div class="icon">Notice</div><div class="text"><p>ABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789ABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789ABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789</p></div></div>
</body>
</html>

1. In .text ändern Sie einfach overflow-wrap auf normal. Selbst wenn die Breite des Elements reduziert wird, kann die Zeichenkette über die Grenzen hinauslaufen. Stellen Sie danach anywhere wieder her.
2. Um die Auswirkungen von min-width separat zu sehen, entfernen Sie min-width: 0 und behalten overflow-wrap: normal bei. Nachdem Sie bestimmt haben, wie die Mindestgröße langer Zeichenketten die Platzierung von Elementen beeinflusst, stellen Sie beide Deklarationen wieder auf ihre ursprünglichen Werte zurück.

Wenn eine Ausrichtung nicht möglich ist, überprüfen Sie zuerst die Achse des übergeordneten Elements und den verbleibenden Platz. Wenn die Größe nicht abnimmt, überprüfen Sie die Mindestgröße des Elements und die interne Zeichenkette. Wenn Sie overflow: hidden auf das gesamte übergeordnete Element setzen, um das Problem zu verbergen, könnten Sie Inhalte oder Fokusanzeigen verlieren. Es ist einfacher, die Ergebnisse zu beurteilen, wenn die Layoutgröße und die Inhaltsanzeige separat gelöst werden.