Guten Tag, Freunde!



Hier ist ein vollständiger visueller Spickzettel für alle Eigenschaften von Flexbox- und Grid-CSS-Modulen.



Hauptquellen: Eine vollständige Anleitung zu Flexbox , Eine vollständige Anleitung zu Grid .



Am Ende des Artikels finden Sie ein kleines Tutorial zum Erstellen eines Flexbox-Simulators.



Ohne weiteres Vorwort.

Flexbox (Flex, im Folgenden als Flex bezeichnet)

Terminologie

Flex ist keine separate Eigenschaft, sondern ein ganzes Modul, das eine Reihe von Eigenschaften enthält. Einige dieser Eigenschaften werden dem Container hinzugefügt (das übergeordnete Element, das als Flex-Container bezeichnet wird), andere den untergeordneten Elementen (im Folgenden als Flex-Elemente bezeichnet) - Elemente)).



Das "normale" Layout basiert auf dem Fluss von Block- und Inline-Elementen, während das Flex-Layout auf Flex-Flow-Richtungen basiert. Schauen Sie sich dieses Bild aus der Spezifikation an, um die wichtigsten Ideen hinter dem Flex-Layout zu präsentieren.







Elemente werden entlang der Hauptachse (vom Hauptstart zum Hauptende) oder entlang der Querachse (vom Kreuzstart zum Kreuzende) platziert.

• — , , . ; «flex-direction» (, . )
• main-start | main-end — main-start main-end
• (main size) — (main dimension),
• — , .
• cross-start | cross-end — , cross-end cross-start
• (cross size) —

-

display

Diese Eigenschaft definiert einen Flex-Container. Block oder Zeile abhängig vom zugewiesenen Wert. Es enthält den "Flex-Kontext" für alle direkten untergeordneten Elemente des Containers.

.container {
  display: flex; /*  inline-flex */
}

Beachten Sie, dass die CSS-Spalteneigenschaften im Container nicht funktionieren.

Flex-Richtung

Diese Eigenschaft definiert die Hauptachse, die Richtung, in der Elemente im Container platziert werden. Flex selbst (ohne dass die Wrapper ihre Funktionalität erweitern) implementiert das Konzept eines unidirektionalen Layouts. Daher werden Elemente entweder in horizontalen Linien oder in vertikalen Spalten platziert.

.container {
  flex-direction: row | row-reverse | column | column-reverse;
}

• Zeile (Standard): Elemente werden von links nach rechts in ltr oder von rechts nach links in rtl angeordnet
• Zeilenumkehr: Zeilenreihenfolge der Elemente umkehren - von rechts nach links in ltr oder von links nach rechts in rtl
• Spalte: ähnlich wie Zeile, jedoch von oben nach unten
• Spaltenumkehr: Ähnlich wie Zeilenumkehr, jedoch von unten nach oben

Flex-Wrap (Wrap, Übergang, Split)

Standardmäßig werden alle Elemente in einer Zeile platziert. Mit dieser Eigenschaft können Sie die Elemente nach Bedarf in die nächste Zeile verschieben lassen.

.container {
  flex-wrap: nowrap | wrap | wrap-reverse;
}

• nowrap (Standard): Alle Elemente befinden sich in einer Zeile
• Wrap: Elemente können mehrere Zeilen von oben nach unten umfassen
• Wrap-Reverse: Elemente können mehrere Zeilen von unten nach oben umfassen

Flex-Flow (Flow)

Diese Eigenschaft ist eine Abkürzung für Flex-Direction und Flex-Wrap, die die Haupt- und Querachse des Containers definieren. Der Standardwert ist row nowrap.

.container {
  flex-flow: column wrap;
}

Inhalt ausrichten (Inhalt in einer Zeile ausrichten)

Diese Eigenschaft bestimmt die Ausrichtung von Elementen entlang der Hauptachse. Sie können den freien Speicherplatz für nicht verwendete Elemente mit fester Größe oder Flex-Elemente, die ihre maximale Größe erreicht haben, verteilen. Außerdem können Sie die Ausrichtung überlaufender Elemente steuern.

.container {
  justify-content: flex-start | flex-end | center | space-between | space-around | space-evenly | start | end | left | right ... + safe | unsafe;
}

• Flex-Start (Standard): Elemente werden entlang der Hauptachse an den Anfang des Containers verschoben
• Flex-End: Gegenstände werden an das Ende des Containers geschoben
• start: Die Elemente werden an den Anfang des Containers verschoben, bestimmt durch den Wert der Eigenschaft "Schreibmodus"
• end: Elemente werden an das Ende des Containers verschoben, bestimmt durch den Wert der Eigenschaft "Schreibmodus"
• links: Gegenstände werden an den linken Rand des Containers geschoben; Ohne Flex-Richtung ist das Verhalten ähnlich wie beim Start
• rechts: Gegenstände werden an den rechten Rand des Behälters gedrückt; Ohne Flex-Richtung ist das Verhalten dasselbe wie beim Start
• center:
• space-between: , , — ,
• space-around: . , ; , . , ,
• space-evenly: ,

Beachten Sie, dass die Unterstützung für die aufgelisteten Eigenschaften von Browser zu Browser unterschiedlich ist. Die sichersten sind Flex-Start, Flex-End und Center.



Bei den zusätzlichen Schlüsselwörtern "sicher" und "unsicher" können Sie durch die Verwendung von "sicher" das Rendern von Elementen außerhalb der Seite unabhängig von der Positionierung vermeiden, wodurch die Möglichkeit des Bildlaufs ausgeschlossen wird.

Elemente ausrichten (Elemente ausrichten)

Diese Eigenschaft bestimmt, wie Elemente entlang der Querachse positioniert werden. Es kann mit dem Begründungsgehalt für die Querachse (senkrecht zur Hauptachse) verglichen werden.

.container {
  align-items: stretch | flex-start | flex-end | center | baseline | first baseline | last baseline | start | end | self-start | self-end + ... safe | unsafe;
}

• strecken (Standard): Elemente dehnen sich, um den gesamten Container zu füllen (abhängig von ihrer minimalen / maximalen Breite)
• Flex-Start / Start / Selbststart: Elemente werden zum Anfang der Querachse versetzt. Die Unterschiede zwischen den obigen Eigenschaften sind nicht signifikant und hängen von der Biegerichtung oder dem Schreibmodus ab
• Flex-Ende / Ende / Selbst-Ende: Elemente werden zum Ende der Querachse versetzt. Die Unterschiede zwischen den obigen Eigenschaften sind nicht signifikant und hängen von der Biegerichtung oder dem Schreibmodus ab
• Mitte: Die Elemente werden zentriert
• Grundlinie: Elemente werden entlang ihrer Grundlinie ausgerichtet

Die Modifikatorschlüsselwörter "sicher" und "unsicher" können als zusätzliche Einstellungen verwendet werden, um die Ausrichtung von Elementen zu vermeiden, die den Zugriff auf den Inhalt unmöglich machen würden (außerhalb der Seite nicht zugänglich).

Inhalt ausrichten (Inhalt über mehrere Zeilen ausrichten)

Diese Eigenschaft bestimmt die Ausrichtung der Containerlinien, wenn entlang der Querachse freier Raum vorhanden ist. Es ähnelt dem Rechtfertigungsinhalt, der den Raum zwischen einzelnen Elementen entlang der Hauptachse verteilt.



Beachten Sie, dass die betreffende Eigenschaft nur für Containerinhalte gilt, die sich über mehrere Zeilen erstrecken, wenn die Flex-Wrap-Eigenschaft auf Wrap oder Wrap-Reverse festgelegt ist. Bei einem Einzeiler (wenn die Eigenschaft "Flex-Wrap" den Standardwert "No-Wrap" hat) hat das Anwenden von Align-Content keine Auswirkung.

.container {
  align-content: flex-start | flex-end | center | space-between | space-around | space-evenly | stretch | start | end | baseline | first baseline | last baseline + ... safe | unsafe;
}

• normal (Standard): Linien befinden sich an normalen Positionen
• Flex-Start / Start: Linien werden an den Anfang des Containers verschoben. Der Flex-Start hängt von der Flex-Richtung ab und der Start vom Schreibmodus
• Flex-End / End: Linien werden an das Ende des Containers geschoben. Das Flex-Ende hängt von der Flex-Richtung ab und das Ende vom Schreibmodus
• Mitte: Linien werden zentriert
• Zwischenraum: Die Zeilen sind so beabstandet, dass sich die erste Zeile am Anfang des Containers befindet, die letzte am Ende und die verbleibenden Zeilen gleichmäßig verteilt sind
• Leerzeichen: Linien werden mit gleichem Abstand zwischen ihnen beabstandet
• Raumgleichmäßig: Linien werden mit gleichem Abstand um sie herum angeordnet
• Strecken: Linien strecken sich, um den gesamten verfügbaren Platz auszufüllen

Die Modifikatorschlüsselwörter "sicher" und "unsicher" können als zusätzliche Einstellungen verwendet werden, um die Ausrichtung von Elementen zu vermeiden, die den Zugriff auf den Inhalt unmöglich machen würden (außerhalb der Seite nicht zugänglich).

Flex-Elementeigenschaften

Bestellung (Bestellung)

Standardmäßig werden Elemente im Container in der Reihenfolge angeordnet, in der sie im Markup aufgeführt sind. Mit dieser Eigenschaft können Sie dies steuern.

.item {
  order: 5; /*    0 */
}

Flex-Grow (Wachstum, Expansion)

Diese Eigenschaft bestimmt die Fähigkeit eines Elements, bei Bedarf zu erweitern. Es wird ein ganzzahliger Wert verwendet, der als Anteil fungiert. Der Anteil bestimmt, wie viel des verfügbaren Platzes im Container ein Artikel belegen kann.



Wenn alle Elemente ein Flex-Grow von 1 haben, wird der verfügbare Speicherplatz gleichmäßig zwischen ihnen verteilt. Wenn eines der Elemente ein Flex-Grow von 2 hat, nimmt dieses Element im Vergleich zu den übrigen Elementen doppelt so viel Platz ein (oder versucht es zumindest).

.item {
  flex-grow: 4; /*   0 */
}

Negative Werte sind ungültig.

Flex-Shrink (schrumpfen, schrumpfen)

Diese Eigenschaft bestimmt die Fähigkeit eines Elements, bei Bedarf zu komprimieren.

.item {
  flex-shrink: 3; /*   1 */
}

Negative Werte sind ungültig.

Flex-Basis

Diese Eigenschaft bestimmt die Standardgröße des Elements, bevor der verbleibende Speicherplatz verteilt wird. Diese Größe kann eine Länge (z. B. 20%, 5rem usw.) oder ein Schlüsselwort sein. Das Schlüsselwort auto bedeutet, dass der Wert der Eigenschaft "width" oder "height" des Elements verwendet wird (zuvor wurde die Hauptgröße anstelle von auto verwendet). Das Schlüsselwort "Inhalt" bedeutet, dass der Inhalt des Elements berücksichtigt wird. Das erwähnte Schlüsselwort wird noch nicht gut unterstützt, daher ist es schwierig, den Unterschied zwischen Min-Content, Max-Content und Fit-Content zu erkennen.

.item {
  flex-basis:  | auto; /*   auto */
}

Wenn der Wert dieser Eigenschaft 0 ist, wird der das Element umgebende Raum nicht berücksichtigt. Wenn der Wert "auto" ist, wird der verfügbare Speicherplatz gemäß dem Wert der Eigenschaft "flex-grow" zugewiesen.

biegen

Diese Eigenschaft ist eine Abkürzung für Flex-Grow, Flex-Shrink und Flex-Basis. Der zweite und dritte Parameter (Flex-Shrink und Flex-Basis) sind optional. Der Standardwert ist 0 1 auto und auto kann weggelassen werden.

.item {
  flex: none | [ <'flex-grow'> <'flex-shrink'>? || <'flex-basis'> ]
}

Es wird empfohlen, diese Kurzform zu verwenden, anstatt jede Eigenschaft zu definieren, damit die Eigenschaftswerte automatisch in der richtigen Reihenfolge ermittelt werden.

align-self (Einzelelementausrichtung)

Mit dieser Eigenschaft können Sie die Standardausrichtung oder die Selbstausrichtung eines einzelnen Elements überschreiben.



Die verfügbaren Werte finden Sie in der Erläuterung der Ausrichtungselemente.

.item {
  align-self: auto | flex-start | flex-end | center | baseline | stretch;
}

Beachten Sie, dass Float, Clear und Vertical Align keinen Einfluss auf ein Flex-Element haben.

Beispiele von

Beginnen wir mit einem sehr einfachen Beispiel - der Lösung des Problems, ein Element an der Mitte auszurichten.

.parent {
  display: flex;
  height: 300px; /*     */
}

.child {
  width: 100px;  /*     */
  height: 100px; /*     */
  margin: auto;  /* ! */
}

Dies funktioniert dank der Tatsache, dass die auf "auto" gesetzte Eigenschaft "margin" den gesamten verfügbaren Speicherplatz des Flex-Containers belegt. Wenn Sie den vertikalen Füllwert auf Auto setzen, wird das Element auf beiden Achsen perfekt zentriert.



Versuchen wir nun, weitere Eigenschaften zu verwenden. Wir haben 6 Elemente mit fester Größe, deren Größe je nach Bildschirmbreite geändert werden kann, ohne dass Medienabfragen erforderlich sind. Wir möchten, dass der verfügbare Raum der Hauptachse gleichmäßig auf die Elemente verteilt wird.

.flex-container {
  /*     - */
  display: flex;

  /*     ,
           
   *       :
   * flex-direction: row;
   * flex-wrap: wrap;
   */
  flex-flow: row wrap;

  /* ,  ,      */
  justify-content: space-around;
}

Erledigt. Es bleibt ein wenig zu stylen:







Versuchen wir etwas anderes. Angenommen, wir haben ein rechtsbündiges Navigationsmenü in der Kopfzeile unserer Website und möchten, dass es auf mittleren Bildschirmen zentriert und auf kleinen Bildschirmen in einer Spalte angeordnet wird. Kinderleicht.

/*   */
.navigation {
  display: flex;
  flex-flow: row wrap;
  /*          */
  justify-content: flex-end;
}

/*   */
@media (max-width: 800px) {
  .navigation {
    /*                 */
    justify-content: space-around;
  }
}

/*   */
@media (max-width: 500px) {
  .navigation {
    /*           ()   () */
    flex-direction: column;
  }
}

Experimentieren wir mit der Flexibilität der Elemente. Wie wäre es mit der Erstellung eines dreispaltigen Layouts für Mobilgeräte mit einer Kopf- und Fußzeile in voller Größe, die nicht von der Reihenfolge der Elemente im Markup abhängt.

.wrapper {
  display: flex;
  flex-flow: row wrap;
}

/*   flex-basis       100% */
.wrapper > * {
  flex: 1 100%;
}

/*      
 * 1. header
 * 2. article
 * 3. aside 1
 * 4. aside 2
 * 5. footer
 */

/*   */
@media all and (min-width: 600px) {
  /*        */
  .aside { flex: 1 auto; }
}

/*   */
@media all and (min-width: 800px) {
  /*      main 
   *   main   2   ,  
   */
  .main { flex: 2 0px; }
  .aside-1 { order: 1; }
  .main    { order: 2; }
  .aside-2 { order: 3; }
  .footer  { order: 4; }
}

Nützliche Ressourcen

• Spezifikation
• MDN
• Flexbox Cheatsheet
• Flexbox Froggy

Unterstützung

Gitter (im Folgenden als Gitter oder Gitter bezeichnet)

CSS Grid Layout ist bei weitem das leistungsstärkste Tool für das Seitenlayout. Es ist ein bidirektionales System. Dies bedeutet, dass es im Gegensatz zu Flex, das nur mit Zeilen arbeiten kann, sowohl mit Zeilen als auch mit Spalten arbeiten kann. Das Raster enthält die Eigenschaften des übergeordneten Elements (Rastercontainer, im Folgenden als Container bezeichnet) und die Eigenschaften der untergeordneten Elemente (Rasterelemente, Rasterelemente, im Folgenden als Elemente bezeichnet).

Terminologie

Gittercontainer (im Folgenden als Container bezeichnet)

Ein Element, dem eine "display" -Eigenschaft mit dem Wert "grid" zugewiesen ist, wird zu einem Grid-Container. Dieser Container ist der direkte Vorfahr aller Rasterelemente. Im folgenden Beispiel ist ein div mit der Klasse "container" ein Rastercontainer.

<div class="container">
  <div class="item item-1"> </div>
  <div class="item item-2"> </div>
  <div class="item item-3"> </div>
</div>

Gitterlinie (im Folgenden als Linie bezeichnet)

Die Trennlinie, die die Struktur des Gitters bildet. Sie kann vertikal oder horizontal sein und bezeichnet den Rand einer Zeile oder Spalte. Die gelbe Linie im Bild unten ist ein Beispiel für eine vertikale Gitterlinie (Spaltengitterlinie).

Grid Track (im Folgenden als Track oder Track bezeichnet)

Der Abstand zwischen zwei benachbarten Linien. Sie können sich Spuren als Zeilen oder Spalten des Rasters vorstellen. Hier ist ein Beispiel für eine Spur zwischen der zweiten und dritten Zeile.

Gitterbereich (im Folgenden als Bereich bezeichnet)

Der gesamte Abstand zwischen den vier Zeilen. Ein Bereich kann eine beliebige Anzahl von Gitterzellen umfassen. Hier ist ein Beispiel für den Bereich zwischen den horizontalen Linien 1 und 3 und den vertikalen Linien 1 und 3.

Gitterelement (im Folgenden als Element bezeichnet)

Kind (direkter Nachkomme) des Containers. Im folgenden Beispiel sind Elemente mit der Klasse "Element" Rasterelemente, Elemente mit der Klasse "Unterelement" jedoch nicht.

<div class="container">
  <div class="item"> </div>
  <div class="item">
    <p class="sub-item"> </p>
  </div>
  <div class="item"> </div>
</div>

Gitterzelle (im Folgenden als Zelle bezeichnet)

Der Abstand zwischen zwei benachbarten horizontalen und vertikalen Linien. Dies ist die Grundeinheit des Gitters. Hier ist ein Beispiel einer Zelle zwischen den horizontalen Linien 1 und 2 und den vertikalen Linien 2 und 3.

Beispiel

Spalten mit flexibler Breite, deren Größe automatisch basierend auf der Bildschirmbreite ohne Medienabfragen geändert wird.

.grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  /*      min() */
  /* grid-template-columns: repeat(auto-fill, minmax(min(200px, 100%), 1fr)); */
  grid-gap: 1rem;
  /*    ,    */
  /* gap: 1rem */
}

Eigenschaften des Gittercontainers

Anzeige

Diese Eigenschaft macht das Element zu einem Rastercontainer und legt den Rasterkontext für seinen Inhalt fest.

.container {
  display: grid | inline-grid;
}

• Gitter - Block Gitter
• Inline-Gitter - Inline-Gitter

Beachten Sie, dass die Möglichkeit zum Erstellen verschachtelter Grids in die CSS Grid Level 2-Spezifikation verschoben wurde .

Raster-Vorlagen-Spalten, Raster-Vorlagen-Zeilen

Diese Eigenschaften definieren die Spalten und Zeilen der durch Leerzeichen getrennten Rasterwerte. Die Werte repräsentieren die Größe der Spur und die Leerzeichen repräsentieren die Linie.

.container {
  grid-template-columns:  ... |   ...;
  grid-template-rows:  ... |   ...;
}

• <track-size> - Länge, Prozentsatz oder Bruchteile des freien Speicherplatzes des Rasters (mit der Einheit "fr")
• <Zeilenname> - beliebiger Name

Wenn Sie zwischen den Spurwerten einen Leerraum lassen, werden den Linien automatisch positive und negative Zahlen zugewiesen:

.container {
  grid-template-columns: 40px 50px auto 50px 40px;
  grid-template-rows: 25% 100px auto;
}

Sie können Zeilennamen explizit angeben. Beachten Sie die eckigen Klammern:

.container {
  grid-template-columns: [first] 40px [line2] 50px [line3] auto [col4-start] 50px [five] 40px [end];
  grid-template-rows: [row1-start] 25% [row1-end] 100px [third-line] auto [last-line];
}

Linien können mehrere Namen haben. Hier hat zum Beispiel die zweite Zeile zwei Namen:

.container {
  grid-template-rows: [row1-start] 25% [row1-end row2-start] 25% [row2-end];
}

Wenn die Definition wiederholte Fragmente enthält, können Sie die Anweisung "repeat" verwenden, um Folgendes zu verkürzen:

.container {
  grid-template-columns: repeat(3, 20px [col-start]);
}

Welches entspricht dem Folgenden:

.container {
  grid-template-columns: 20px [col-start] 20px [col-start] 20px [col-start];
}

Wenn mehrere Zeilen denselben Namen haben, können Sie den Zeilennamen und die Anzahl dieser Zeilen verwenden.

.item {
  grid-column-start: col-start 2;
}

Mit der Einheit "fr" können Sie die Spurgröße als Bruchteil des freien Speicherplatzes des Containers festlegen. Im folgenden Beispiel ist jedes Element ein Drittel der Breite des Containers:

.container {
  grid-template-columns: 1fr 1fr 1fr;
}

Der freie Speicherplatz wird nach Subtraktion von Elementen fester Größe berechnet. Im folgenden Beispiel enthält der für die Zuweisung mithilfe der Einheit "fr" verfügbare Speicherplatz keine 50 Pixel:

.container {
  grid-template-columns: 1fr 50px 1fr 1fr;
}

Gittervorlagenbereiche

Diese Eigenschaft definiert die Rastervorlage anhand der in den Eigenschaften "Rasterbereich" definierten Bereichsnamen. Durch das Wiederholen von Bereichsnamen wird der Inhalt um die angegebene Anzahl von Zellen erweitert. Ein Punkt bedeutet eine leere Zelle. Mit dieser Syntax können Sie die Struktur des Rasters visualisieren.

.container {
  grid-template-areas:
    " | . | none | ..."
    "...";
}

• <Gitterbereichsname> - Bereichsname
• ... - leere Zelle
• keine - keine Fläche

Beispiel:

.item-a {
  grid-area: header;
}
.item-b {
  grid-area: main;
}
.item-c {
  grid-area: sidebar;
}
.item-d {
  grid-area: footer;
}

.container {
  display: grid;
  grid-template-columns: 50px 50px 50px 50px;
  grid-template-rows: auto;
  grid-template-areas:
    "header header header header"
    "main main . sidebar"
    "footer footer footer footer";
}

Dieser Code erstellt ein Raster mit einer Breite von vier Spalten und einer Höhe von drei Zeilen. Die erste (oberste) Zeile ist vollständig vom Header belegt. Die mittlere Reihe besteht aus zwei "Haupt" -Bereichen, einer leeren Zelle und einem "Seitenleisten" -Bereich. Die letzte Zeile ist der Keller.







Jede Zeile in der Definition muss dieselbe Anzahl von Spalten haben.



Eine beliebige Anzahl von Punkten kann verwendet werden, um eine leere Zelle darzustellen. Solange zwischen den Punkten kein Leerzeichen ist, sind sie ein Indikator für eine leere Zelle.



Beachten Sie, dass diese Syntax verwendet wird, um Bereiche und keine Linien zu kennzeichnen. Mit dieser Syntax wird die Linie auf jeder Seite der Region automatisch benannt. Wenn der Regionsname "foo" ist, sind die ersten (ersten) Zeilen (Zeile und Spalte) der Region "foo-start" und die letzte "foo-end". Dies bedeutet, dass einige Zeilen mehrere Namen haben können, wie im obigen Beispiel, wobei die obere linke Zeile drei Namen hat: Kopfstart, Hauptstart und Fußzeilenstart.

Gittervorlage

Diese Eigenschaft ist eine Abkürzung für Rastervorlagenzeilen, Rastervorlagenspalten und Rastervorlagenbereiche.

.container {
  grid-template: none | <grid-template-rows> / <grid-template-columns>;
}

• none - Setzt die Werte aller drei Eigenschaften auf den Standardwert zurück
• <grid-template-rows> / <grid-template-columns> - Setzt die Eigenschaften "grid-template-rows" und "grid-template-column" auf die entsprechenden Werte und die Eigenschaft "grid-template-area" auf "none".

Sie können eine komplexere, aber gleichzeitig bequemere Syntax verwenden, um die Werte aller drei Eigenschaften zu definieren:

.container {
  grid-template:
    [row1-start] "header header header" 25px [row1-end]
    [row2-start] "footer footer footer" 25px [row2-end]
    / auto 50px auto;
}

Dies entspricht dem Folgenden:

.container {
  grid-template-rows: [row1-start] 25px [row1-end row2-start] 25px [row2-end];
  grid-template-columns: auto 50px auto;
  grid-template-areas:
    "header header header"
    "footer footer footer";
}

Da die Rastervorlage die impliziten Rastereigenschaften (z. B. Raster-Auto-Spalten, Raster-Auto-Zeilen und Raster-Auto-Flow) nicht zurücksetzt, was in den meisten Fällen erforderlich ist, wird empfohlen, stattdessen die Eigenschaft "Raster" zu verwenden.

Spaltenlücke, Zeilenlücke, Gitter-Spalten-Lücke, Gitter-Zeilen-Lücke

Diese Eigenschaften bestimmen die Größe der Linien. Mit anderen Worten, sie bestimmen das Ausmaß der Einrückung zwischen Spalten / Zeilen.

.container {
  /*  */
  column-gap: <line-size>;
  row-gap: <line-size>;

  /*  */
  grid-column-gap: <line-size>;
  grid-row-gap: <line-size>;
}

• <Liniengröße> - Anzahl der Einrückungen

Beispiel:

.container {
  grid-template-columns: 100px 50px 100px;
  grid-template-rows: 80px auto 80px;
  column-gap: 10px;
  row-gap: 15px;
}

Das Auffüllen wird nur zwischen Spalten / Zeilen erstellt, nicht entlang der Ränder des Rasters.



Beachten Sie, dass die Eigenschaften "Grid-Column-Gap" und "Grid-Row-Gap" jetzt in "Column-Gap" und "Row-Gap" umbenannt wurden.

Lücke, Gitterlücke

Diese Eigenschaft ist eine Abkürzung für Zeilen- und Spaltenlücke.

.container {
  /*  */
  gap: <grid-row-gap> <grid-column-gap>;

  /*  */
  grid-gap: <grid-row-gap> <grid-column-gap>;
}

• <grid-row-gap> <grid-column-gap> - Polstergrößen

Beispiel:

.container {
  grid-template-columns: 100px 50px 100px;
  grid-template-rows: 80px auto 80px;
  gap: 15px 10px;
}

Wenn die Eigenschaft "Zeilenlücke" nicht festgelegt ist, wird sie auf die Eigenschaft "Spaltenlücke" festgelegt.



Beachten Sie, dass die Eigenschaft "Grid-Gap" jetzt in "Gap" umbenannt wurde.

Artikel rechtfertigen

Diese Eigenschaft bestimmt die Ausrichtung von Elementen in Zellen entlang der Linienachse (horizontal) (im Gegensatz zur Eigenschaft "Elemente ausrichten", die die Ausrichtung entlang der Blockachse (Spalte, vertikal) bestimmt). Der Wert dieser Eigenschaft gilt für alle Elemente im Container.

.container {
  justify-items: start | end | center | stretch;
}

• Startelemente werden an den Anfang ihrer Zellen verschoben (linker Rand)
• Endelemente werden an das Ende der Zellen verschoben (rechter Rand)
• Mitte - Elemente werden zentriert
• Stretch - Elemente füllen die gesamte Breite der Zellen aus

.container {
  justify-items: start;
}

.container {
  justify-items: end;
}

.container {
  justify-items: center;
}

.container {
  justify-items: stretch;
}

Die Position eines einzelnen Elements entlang der Zeilenachse der Zelle wird durch die Eigenschaft "Selbst rechtfertigen" gesteuert.

Elemente ausrichten

Diese Eigenschaft bestimmt die Ausrichtung von Elementen in Zellen entlang der Boxachse (Spalte, Vertikal) (im Gegensatz zur Eigenschaft "Elemente ausrichten", die die Ausrichtung entlang der Zeilenachse (horizontal) bestimmt). Der Wert dieser Eigenschaft gilt für alle Elemente im Container.

.container {
  align-items: start | end | center | stretch;
}

• Startelemente werden an den Anfang ihrer Zellen verschoben (oberer Rand)
• Endelemente werden an das Ende der Zellen verschoben (unterer Rand)
• Mitte - Elemente werden zentriert
• Stretch - Elemente füllen die gesamte Höhe der Zellen aus

.container {
  align-items: start;
}

.container {
  align-items: end;
}

.container {
  align-items: center;
}

.container {
  align-items: stretch;
}

Die Position eines einzelnen Elements entlang der Zellenspaltenachse wird durch die Eigenschaft "align-self" gesteuert.

Platzgegenstände

Diese Eigenschaft ist eine Abkürzung für Ausrichtungselemente und Ausrichtungselemente.

.container {
  place-items: <align-items> <justify-items>;
}

• <Ausrichtungselemente> <Ausrichtungselemente> ist der erste Wert für Ausrichtungselemente, der zweite für Ausrichtungselemente. Wenn es keinen zweiten Wert gibt, wird der erste Wert beiden Eigenschaften zugewiesen.

Beispiel:

.container {
  place-items: center start;
}

Elemente werden entlang der Spaltenachse und am Ursprung entlang der Linienachse zentriert.

Begründungsinhalt (Spaltenausrichtung)

Manchmal ist die Gesamtbreite der Rasterelemente (ihrer Spalten) geringer als die Breite des Containers. Dies kann passieren, wenn Elemente einer festen Größe definiert werden (z. B. mit px). In diesem Fall können wir die Reihenfolge der Rasterspalten im Container definieren. Diese Eigenschaft bestimmt die Ausrichtung des Gitters entlang der Linienachse - die Ausrichtung der Spalten (im Gegensatz zur Eigenschaft "Inhalt ausrichten"), die die Ausrichtung des Gitters entlang der Blockachse (Spalte) bestimmt - die Ausrichtung der Zeilen).

.container {
  justify-content: start | end | center | stretch | space-around | space-between | space-evenly;
}

• start - verschiebt das Gitter an den Anfang des Containers (linker Rand)
• Ende - verschiebt das Gitter an das Ende des Containers (rechter Rand)
• Mitte - Das Gitter ist zentriert
• stretch — ,
• space-around — ,
• space-between — , — ,
• space-evenly — ,

.container {
  justify-content: start;
}

.container {
  justify-content: end;
}

.container {
  justify-content: center;
}

.container {
  justify-content: stretch;
}

.container {
  justify-content: space-around;
}

.container {
  justify-content: space-between;
}

.container {
  justify-content: space-evenly;
}

align-content ( )

Manchmal ist die Gesamthöhe der Gitterelemente (ihrer Zeilen) geringer als die Höhe des Containers. Dies kann passieren, wenn Elemente mit fester Größe definiert werden (z. B. mit px). In diesem Fall können wir die Reihenfolge der Rasterzeilen im Container bestimmen. Diese Eigenschaft definiert die Ausrichtung des Rasters entlang der Box- (Spalten-) Achse - die Ausrichtung von Zeilen (im Gegensatz zur Eigenschaft "Inhalt ausrichten"), die die Ausrichtung des Rasters entlang der Inline-Achse bestimmt - die Ausrichtung von Spalten).

.container {
  align-content: start | end | center | stretch | space-around | space-between | space-evenly;
}

• start - verschiebt das Gitter an den Anfang des Containers (oberer Rand)
• Ende - verschiebt das Gitter an das Ende des Containers (unterer Rand)
• Mitte - Das Gitter ist zentriert
• Dehnen - Die Linien werden so gedehnt, dass das Gitter die gesamte Höhe des Containers einnimmt
• Leerzeichen - gleicher Abstand zwischen den Zeilen und die Hälfte dieses Bereichs um die Ränder des Containers
• Zwischenraum - die erste Zeile wird an den Anfang des Containers verschoben, die letzte - bis zum Ende wird der freie Speicherplatz gleichmäßig auf die übrigen Zeilen verteilt
• Platz gleichmäßig - gleicher Abstand zwischen den Linien und an den Rändern des Containers

.container {
  align-content: start;
}

.container {
  align-content: end;
}

.container {
  align-content: center;
}

.container {
  align-content: stretch;
}

.container {
  align-content: space-around;
}

.container {
  align-content: space-between;
}

.container {
  align-content: space-evenly;
}

Ortsinhalt

Diese Eigenschaft ist eine Abkürzung für Align-Content und Justify-Content.

.container {
  place-content: <align-content> <justify-content>;
}

• <Ausrichtungsinhalt> <Ausrichtungsinhalt> ist der erste Wert für Ausrichtungsinhalt, der zweite für Ausrichtungsinhalt. Wenn es keinen zweiten Wert gibt, wird der erste Wert beiden Eigenschaften zugewiesen.

Beispiel:

.container {
  place-content: center start;
}

Zeilen werden im Container zentriert, Spalten stehen am Anfang.

Raster-Auto-Spalten, Raster-Auto-Zeilen (Größe der impliziten Spuren)

Diese Eigenschaften bestimmen die Größe automatisch generierter Spuren (implizite Spuren). Implizite Spuren werden erstellt, wenn sich mehr Elemente als Zellen im Raster befinden oder wenn ein Element außerhalb des Rasters platziert wird.

.container {
  grid-auto-columns: <track-size> ...;
  grid-auto-rows: <track-size> ...;
}

• <track-size> - Länge, Prozentsatz oder Bruchteile des freien Speicherplatzes des Rasters (mit der Einheit "fr")

Beispiel:

.container {
  grid-template-columns: 60px 60px;
  grid-template-rows: 90px 90px;
}

Dadurch wird ein 2x2-Raster erstellt.



Angenommen, wir verwenden die Eigenschaften "Rasterspalte" und "Rasterzeile", um die Elemente wie folgt zu positionieren:

.item-a {
  grid-column: 1 / 2;
  grid-row: 2 / 3;
}
.item-b {
  grid-column: 5 / 6;
  grid-row: 2 / 3;
}

Das Element mit der Klasse "item-b" beginnt mit der vertikalen Linie 5 und endet mit der vertikalen Linie 6, aber wir haben diese Linien nicht definiert. Da wir auf nicht vorhandene Zeilen verweisen, werden implizite Spuren mit der Breite Null erstellt, um die Einrückungen auszufüllen. Wir können die Eigenschaft "grid-auto-column" verwenden, um die Breite der impliziten Spuren zu definieren:

.container {
  grid-auto-columns: 60px;
}

Grid-Auto-Flow

Der Auto-Placement-Algorithmus kann verwendet werden, um Elemente außerhalb des Rasters zu positionieren. Die betrachtete Eigenschaft bestimmt, wie der angegebene Algorithmus funktionieren soll.

.container {
  grid-auto-flow: row | column | row dense | column dense;
}

• Zeile (Standard) - Der Algorithmus füllt die aktuelle Zeile bis zum Limit und erstellt bei Bedarf eine neue Zeile, wenn die Breite der aktuellen Zeile nicht ausreicht
• Spalte - Der Algorithmus füllt die aktuelle Spalte bis zum Limit und erstellt bei Bedarf eine neue Spalte, wenn die Höhe der aktuellen Spalte nicht ausreicht
• dichtes - intelligentes Füllen des Gitters, wenn Elemente unterschiedlicher Größe vorhanden sind

Beachten Sie, dass Dichte die visuelle Reihenfolge der Elemente ändert, was sich negativ auf die Zugänglichkeit auswirken kann.



Nehmen wir an, wir haben das folgende Markup:

  <section class="container">
  <div class="item-a">item-a</div>
  <div class="item-b">item-b</div>
  <div class="item-c">item-c</div>
  <div class="item-d">item-d</div>
  <div class="item-e">item-e</div>
</section>

Wir definieren ein Raster mit fünf Spalten und zwei Zeilen und setzen die Eigenschaft "grid-auto-flow" auf "row" (Standardeinstellung):

.container {
  display: grid;
  grid-template-columns: 60px 60px 60px 60px 60px;
  grid-template-rows: 30px 30px;
  grid-auto-flow: row;
}

Beim Platzieren von Elementen im Raster platzieren wir nur zwei Elemente:

.item-a {
  grid-column: 1;
  grid-row: 1 / 3;
}
.item-e {
  grid-column: 5;
  grid-row: 1 / 3;
}

Da der Wert der Eigenschaft "grid-auto-flow" "row" ist, sieht unser Grid wie im Bild unten aus. Beachten Sie die Anordnung der Elemente mit den Klassen "item-b", "item-c" und "item-d" (Zeilen werden bevorzugt):







Wenn Sie den Wert der Eigenschaft "grid-auto-flow" in "column" ändern, sieht das Grid folgendermaßen aus Weg (bevorzugt werden Spalten):

Gitter

Diese Eigenschaft ist eine Abkürzung für Rastervorlagenzeilen, Rastervorlagenspalten, Rastervorlagenbereiche, Rasterautozeilen, Rasterautospalten und Rasterautomatik (beachten Sie, dass eine Deklaration enthalten kann nur "explizite" oder "implizite" Eigenschaften).

• none - Alle Eigenschaften akzeptieren Standardwerte
• <grid-template> - ähnlich der Verknüpfung zu Grid-Template
• <grid-template-rows> / [auto-flow && dicht?] <grid-auto-columns>? - definiert einen Wert für Rastervorlagenzeilen. Wenn sich das Schlüsselwort "auto-flow" rechts vom Schrägstrich befindet, wird der Wert der Eigenschaft "grid-auto-flow" zu "column". Wenn zusätzlich zum automatischen Fluss das Schlüsselwort "dicht" angegeben wird, packt der automatische Verschachtelungsalgorithmus die Elemente entsprechend. Wenn der Wert für die Eigenschaft "grid-auto-columns" weggelassen wird, wird sein Wert zu "auto".
• [Auto-Flow && dicht?] <grid-auto-rows>? / <grid-template-columns> - Definiert den Wert für Grid-Template-Spalten. Wenn sich das Schlüsselwort "auto-flow" links vom Schrägstrich befindet, wird der Wert der Eigenschaft "grid-auto-flow" zu "row". Wenn zusätzlich zum automatischen Fluss das Schlüsselwort "dicht" angegeben wird, packt der automatische Verschachtelungsalgorithmus die Elemente entsprechend. Wenn der Wert für die Eigenschaft "grid-auto-rows" weggelassen wird, wird sein Wert zu "auto".

Die folgenden zwei Codeblöcke sind äquivalent:

.container {
  grid: 100px 300px / 3fr 1fr;
}

.container {
  grid-template-rows: 100px 300px;
  grid-template-columns: 3fr 1fr;
}

Die folgenden zwei Codeblöcke sind äquivalent:

.container {
  grid: auto-flow / 200px 1fr;
}

.container {
  grid-auto-flow: row;
  grid-template-columns: 200px 1fr;
}

Die folgenden zwei Codeblöcke sind äquivalent:

.container {
  grid: auto-flow dense 100px / 1fr 2fr;
}

.container {
  grid-auto-flow: row dense;
  grid-auto-rows: 100px;
  grid-template-columns: 1fr 2fr;
}

Und die folgenden zwei Codeblöcke sind ebenfalls äquivalent:

.container {
  grid: 100px 300px / auto-flow 200px;
}

.container {
  grid-template-rows: 100px 300px;
  grid-auto-flow: column;
  grid-auto-columns: 200px;
}

In diesem Fall können wir eine komplexere, aber gleichzeitig bequemere Syntax verwenden, um gleichzeitig die Eigenschaften "Rastervorlagenbereiche", "Rastervorlagenzeilen" und "Rastervorlagenspalten" zu definieren und andere Eigenschaften auf Standardwerte zu setzen ... Dazu müssen Sie die Namen der Linien und die Größe der Spuren mit den entsprechenden Bereichen auf einer Linie definieren. Dies lässt sich anhand eines Beispiels leichter demonstrieren:

.container {
  grid: [row1-start] "header header header" 1fr [row1-end]
        [row2-start] "footer footer footer" 25px [row2-end]
        / auto 50px auto;
}

Dies entspricht dem Folgenden:

.container {
  grid-template-areas:
    "header header header"
    "footer footer footer";
  grid-template-rows: [row1-start] 1fr [row1-end row2-start] 25px [row2-end];
  grid-template-columns: auto 50px auto;
}

Eigenschaften von Rasterelementen

Beachten Sie, dass die Eigenschaften float, display: inline-block, display: table-cell, vertical-align und column- *, die auf ein Rasterelement angewendet werden, keine Auswirkung haben.

Raster-Spalten-Start, Raster-Spalten-Ende, Raster-Zeilen-Start, Raster-Zeilen-Ende

Diese Eigenschaften bestimmen die Position eines Elements im Raster, indem sie an bestimmten Linien fangen. Rasterspaltenstart / Rasterzeilenstart sind die Startzeilen des Elements, und Rasterspaltenende / Rasterzeilenende sind die Endzeilen.

.item {
  grid-column-start: <number> | <name> | span <number> | span <name> | auto;
  grid-column-end: <number> | <name> | span <number> | span <name> | auto;
  grid-row-start: <number> | <name> | span <number> | span <name> | auto;
  grid-row-end: <number> | <name> | span <number> | span <name> | auto;
}

• <Zeile> - kann eine Nummer (Einrasten in die Zeilennummer) oder ein Name (Einrasten in den Zeilennamen) sein.
• span <Nummer> - Das Element wird für die angegebene Anzahl von Spuren gestreckt
• span <Name> - Das Element wird gedehnt, bis es die Linie mit dem angegebenen Namen erreicht
• Auto - Auto-Layout, Auto-Erweiterung oder Standard-Dehnung einer Spalte

.item-a {
  grid-column-start: 2;
  grid-column-end: five;
  grid-row-start: row1-start;
  grid-row-end: 3;
}

.item-b {
  grid-column-start: 1;
  grid-column-end: span col4-start;
  grid-row-start: 2;
  grid-row-end: span 2;
}

Wenn keine Eigenschaftswerte für Rasterspaltenende / Rasterzeilenende angegeben sind, belegt das Element standardmäßig 1 Spur.



Elemente können sich überlappen. Mit der Eigenschaft z-index können Sie die Stapelreihenfolge von Elementen steuern.

Gitterspalte, Gitterreihe

Diese Eigenschaften sind Abkürzungen für Grid-Column-Start + Grid-Column-End bzw. Grid-Row-Start + Grid-Row-End.

.item {
  grid-column: <start-line> / <end-line> | <start-line> / span <value>;
  grid-row: <start-line> / <end-line> | <start-line> / span <value>;
}

• <Startlinie> / <Endlinie> - Die Werte entsprechen den ursprünglichen Eigenschaften, einschließlich der Spanne

Beispiel:

.item-c {
  grid-column: 3 / span 2;
  grid-row: third-line / 4;
}

Wenn keine Endzeile angegeben ist, wird standardmäßig 1 Spur für das Element verwendet.

Gitterfläche

Diese Eigenschaft definiert den Namen des Elements, das als Wert in der Eigenschaft "Rastervorlagenbereiche" verwendet wird. Die Rasterfläche kann auch als Abkürzung für Rasterzeilenstart + Rasterspaltenstart + Rasterzeilenende + Rasterspaltenende verwendet werden.

.item {
  grid-area: <name> | <row-start> / <column-start> / <row-end> / <column-end>;
}

• <Name> - beliebiger Name des Elements
• <Zeilenstart> / <Spaltenstart> / <Zeilenende> / <Spaltenende> - können Zahlen oder Zeilennamen sein

Ein Element benennen:

.item-d {
  grid-area: header;
}

Abkürzung für Grid-Row-Start + Grid-Column-Start + Grid-Row-End + Grid-Column-End:

.item-d {
  grid-area: 1 / col4-start / last-line / 6;
}

Selbst rechtfertigen

Diese Eigenschaft bestimmt die Ausrichtung eines Elements in einer Zelle entlang der Zeilenachse (im Gegensatz zur Eigenschaft align-self, die die Ausrichtung entlang der Box- (Spalten-) Achse angibt). Diese Eigenschaft gilt für ein Element in einer einzelnen Zelle.

.item {
  justify-self: start | end | center | stretch;
}

• start - das Element wird an den Anfang der Zelle verschoben (linker Rand)
• Ende - Das Element wird an das Ende der Zelle verschoben (rechter Rand).
• Mitte - Das Element ist zentriert
• strecken - Das Element füllt die gesamte Breite der Zelle aus

.item-a {
  justify-self: start;
}

.item-a {
  justify-self: end;
}

.item-a {
  justify-self: center;
}

.item-a {
  justify-self: stretch;
}

Mit der Eigenschaft "Elemente ausrichten" wird die Ausrichtung aller Rasterelemente entlang der Linienachse gesteuert.

Selbst ausrichten

Diese Eigenschaft bestimmt die Ausrichtung eines Elements in einer Zelle entlang der Box- (Spalten-) Achse (im Gegensatz zur Justize-Self-Eigenschaft, die die Ausrichtung entlang der Zeilenachse bestimmt). Diese Eigenschaft gilt für ein Element in einer einzelnen Zelle.

.item {
  align-self: start | end | center | stretch;
}

• start - das Element wird an den Anfang der Zelle verschoben (oberer Rand)
• Ende - Das Element wird an das Ende der Zelle verschoben (unterer Rand).
• Mitte - Das Element ist zentriert
• strecken - das Element füllt die gesamte Zellenhöhe aus

.item-a {
  align-self: start;
}

.item-a {
  align-self: end;
}

.item-a {
  align-self: center;
}

.item-a {
  align-self: stretch;
}

Mit der Eigenschaft align-items wird die Ausrichtung aller Rasterelemente entlang der Blockachse (Spalte) gesteuert.

Ort-Selbst

Diese Eigenschaft ist eine Abkürzung für Align-Self und Justify-Self.

• Auto - Standardwert
• <align-self> / <justify-self> ist der erste Wert für align-self, der zweite für adjustal-self. Wenn der zweite Wert weggelassen wird, wird der erste Wert auf beide Eigenschaften angewendet

.item-a {
  place-self: center;
}

.item-a {
  place-self: center stretch;
}

• , px, rem, % .., , min-content, max-content, auto , , — (fr). grid-template-columns: 200px 1fr 2fr min-content
• , . , , 1fr, 200px: grid-template-columns: 1fr minmax(200px, 1fr)
• repeat() : grid-template-columns: repeat(10, 1fr) ( , 1fr)
• Die Kombination dieser Funktionen ermöglicht eine unglaubliche Layoutflexibilität, zum Beispiel: Raster-Vorlagenspalten: Wiederholen (automatische Füllung, Minmax (200px, 1fr)) (aus dem Beispiel am Anfang des Rasterabschnitts)

Nützliche Ressourcen

• Spezifikation
• MDN
• Grid Cheatsheet
• Gittergarten

Unterstützung

Lernprogramm

In diesem Tutorial erstellen wir einen einfachen Trainer für grundlegende Flexbox-Eigenschaften.

Markup

<main>
  <div id="controls">
    <div id="buttons">
      <button data-btn="addBtn">Add Item</button>
      <button data-btn="removeBtn">Remove Item</button>
    </div>
    <fieldset id="flexContainerProps">
      <legend>Flex Container Props</legend>
      <label for="flexDirection">flex-direction</label>
      <select id="flexDirection">
        <option value="row" selected>row</option>
        <option value="row-reverse">row-reverse</option>
        <option value="column">column</option>
        <option value="column-reverse">column-reverse</option>
      </select>

      <label for="flexWrap">flex-wrap</label>
      <select id="flexWrap">
        <option value="nowrap">nowrap</option>
        <option value="wrap" selected>wrap</option>
        <option value="wrap-reverse">wrap-reverse</option>
      </select>

      <label for="justifyContent">justify-content</label>
      <select id="justifyContent">
        <option value="flex-start">flex-start</option>
        <option value="flex-end">flex-end</option>
        <option value="center" selected>center</option>
        <option value="space-between">space-between</option>
        <option value="space-around">space-around</option>
        <option value="space-evenly">space-evenly</option>
      </select>

      <label for="alignItems">align-items</label>
      <select id="alignItems">
        <option value="flex-start">flex-start</option>
        <option value="flex-end">flex-end</option>
        <option value="center" selected>center</option>
        <option value="stretch">stretch</option>
        <option value="baseline">baseline</option>
      </select>

      <label for="alignContent">align-content</label>
      <select id="alignContent">
        <option value="flex-start" selected>flex-start</option>
        <option value="flex-end">flex-end</option>
        <option value="center">center</option>
        <option value="stretch">stretch</option>
        <option value="space-between">space-between</option>
        <option value="space-around">space-around</option>
        <option value="space-evenly">space-evenly</option>
      </select>
    </fieldset>

    <fieldset id="flexItemProps">
      <legend>Flex Item Props</legend>
      <label for="order">order</label>
      <input
        id="order"
        type="number"
        min="-5"
        max="5"
        step="1"
        value="0"
      />

      <label for="flexGrow">flex-grow</label>
      <input
        id="flexGrow"
        type="number"
        min="0"
        max="5"
        step="1"
        value="0"
      />

      <label for="flexShrink">flex-shrink</label>
      <input
        id="flexShrink"
        type="number"
        min="1"
        max="6"
        step="1"
        value="1"
      />

      <label for="alignSelf">align-self</label>
      <select id="alignSelf">
        <option value="auto" selected>auto</option>
        <option value="flex-start">flex-start</option>
        <option value="flex-end">flex-end</option>
        <option value="center">center</option>
        <option value="stretch">stretch</option>
        <option value="baseline">baseline</option>
      </select>
    </fieldset>
  </div>

  <div id="flexContainer">
    <div class="flex-item selected">1</div>
    <div class="flex-item">2</div>
    <div class="flex-item">3</div>
    <div class="flex-item">4</div>
    <div class="flex-item">5</div>
    <div class="flex-item">6</div>
  </div>
</main>

Hier haben wir einen flexContainer mit sechs flex-Elementen und einem Steuerelement zum Umschalten der Eigenschaften der flexContainerProps und ausgewählter flexItemProps. Auch im zweiten Container haben wir zwei Schaltflächen: eine zum Hinzufügen eines Elements zum Flex-Container (addBtn), die andere zum Entfernen des letzten Flex-Elements (removeBtn).

Stile

main {
  display: flex;
  justify-content: center;
  align-items: center;
}

#controls {
  margin-right: 0.4rem;
}

#buttons {
  margin: 0.4rem;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}

button {
  margin: 0.2rem;
}

label {
  display: block;
  margin: 0.4rem;
}

select {
  width: 100%;
}

#flexContainer {
  width: 600px;
  height: 600px;
  border: 1px dashed #222;
  border-radius: 4px;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
}

.flex-item {
  min-width: 178px;
  min-height: 178px;
  background: radial-gradient(circle, yellow, orange);
  border: 1px solid #222;
  border-radius: 4px;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.4);
  color: #222;
  font-size: 2rem;
  display: flex;
  justify-content: center;
  align-items: center;
  user-select: none;
  cursor: pointer;
}

.flex-item:nth-child(2n) {
  min-width: 158px;
  min-height: 158px;
}

.flex-item:nth-child(3n) {
  min-width: 198px;
  min-height: 198px;
}

.flex-item.selected {
  background: radial-gradient(circle, lightgreen, darkgreen);
}

Flex-Elemente sollten unterschiedlich groß und gleichzeitig flexibel sein. Dies erreichen wir mit min-width / min-height und n-tem Kind. Das ausgewählte Element gehört zur Klasse "ausgewählt" mit einer anderen Hintergrundfarbe.

Skript

//    
const controls = document.querySelector('#controls')
const buttons = document.querySelector('#buttons')
const flexContainer = document.querySelector('#flexContainer')

//   
buttons.addEventListener('click', (e) => {
  //     
  if (e.target.tagName !== 'BUTTON') return

  //   
  const { btn } = e.target.dataset

  switch (btn) {
    //        -
    case 'addBtn':
      //     6 
      //      -
      //    
      const num = document.querySelectorAll('.flex-item').length + 1
      // ,      7 
      //   
      if (num < 7) {
        //    "div"
        const newItem = document.createElement('div')
        //    
        newItem.className = 'flex-item'
        //  
        newItem.textContent = num
        //    -
        flexContainer.append(newItem)
      }
      break
    //      -
    case 'removeBtn':
      //    
      const index = document.querySelectorAll('.flex-item').length - 1
      // ,      0
      //      -
      if (index > 0) {
        //  ,  
        const itemToRemove = document.querySelectorAll('.flex-item')[index]
        //   
        itemToRemove.remove()
      }
      break
  }
})

//     
controls.addEventListener('change', (e) => {
  //    
  const prop = e.target.id
  //    
  const value = e.target.value

  // ,   
  //  -    -
  //      
  if (e.target.parentElement.id === 'flexContainerProps') {
    flexContainer.style[prop] = value
  } else {
    const selectedItem = document.querySelector('.selected')
    selectedItem.style[prop] = value
  }
})

//   -
flexContainer.addEventListener('click', (e) => {
  //        -
  if (
    e.target.className !== 'flex-item' ||
    e.target.classList.contains('selected')
  )
    return

  //     "selected"    
  if (document.querySelector('.selected') !== null)
    document.querySelector('.selected').classList.remove('selected')

  //      
  e.target.classList.add('selected')

  //   -      "-"
  //       
  //      -
  //    
  //   ,     

  //         
  //         -
  const getStyle = (property, element = e.target) =>
    getComputedStyle(element).getPropertyValue(property)

  //  ,      DOM-,   "id", 
  //  ,     
  order.value = getStyle('order')
  flexGrow.value = getStyle('flex-grow')
  flexShrink.value = getStyle('flex-shrink')
  alignSelf.value = getStyle('align-self')
})

Wie Sie sehen können, nichts kompliziertes. Natürlich ist die Funktionalität des resultierenden Simulators sehr eingeschränkt. Ich glaube jedoch, dass dies ausreicht, um zu verstehen, wie die grundlegenden Eigenschaften von Flexbox funktionieren.



Ich empfehle, einen ähnlichen Simulator zu erstellen, der auf den grundlegenden Eigenschaften des Rasters basiert. Dies ist eine hervorragende Übung und ermöglicht es Ihnen, alles richtig zu verstehen.







Vielleicht finden Sie auch eines meiner letzten Projekte interessant, die Modern HTML Starter Template .



Vielen Dank für Ihre Aufmerksamkeit und einen schönen Tag.