So bestellen und ausrichten Sie Elemente im Netzlayout

Dieses Tutorial zeigt die Vermittlung und Ausrichtung der Elemente innerhalb des CSS -Gitterlayouts. Wir werden Bestellelemente untersuchen und sie sowohl einzeln als auch als Gruppe ausrichten.

Zuvor haben wir die Grundlagen des Gitterlayouts abgedeckt, einschließlich Element-Platzierung und des Auto-Placement-Algorithmus.

Verwenden Sie für eine optimale Demonstration die neuesten Versionen von Firefox (Version 52 oder höher) oder Chrome (Version 57 oder höher). Beide bieten native Raster -Layout -Unterstützung an.

Schlüsselkonzepte:

• Die Eigenschaft order diktiert die Elementsequenz im Raster und überschreibt die Standard -DOM -Reihenfolge. Dies ist besonders hilfreich bei zahlreichen oder dynamisch hinzugefügten Elementen.
• Zeilenachrichtung verwendet justify-self (einzelne Elemente) und justify-items (alle Elemente). justify-self richtet einen einzelnen Element aus; justify-items richtet alle Elemente innerhalb des Netzes aus.
• Spalten-Achse-Ausrichtung verwendet align-self (einzelne Elemente) und align-items (alle Elemente). Beide akzeptieren start, end, center und stretch.
• Gesamtgitterausrichtung wird durch justify-content (Zeilenachse) und align-content (Säulenachse) gesteuert, die auf den Gitterbehälter angewendet werden. Diese akzeptieren start, end, center, stretch, space-around, space-between und space-evenly.

Elementbestellung mit order:

Die Eigenschaft order gibt die Elementplatzierungssequenz an. Standardmäßig folgen Elemente ihrer DOM -Bestellung. order ermöglicht jedoch eine maßgeschneiderte Anordnung, insbesondere mit vielen oder dynamisch angezeigten Elementen.

niedrigere order -Werte erscheinen zuerst; Elemente mit gleichen order -Wertern behalten ihre DOM -Reihenfolge bei.

Beispiel:

html:

<div class="container">
  <div class="item a">A</div>
  <div class="item b">B</div>
  <div class="item c">C</div>
  <div class="item d">D</div>
  <div class="item e">E</div>
  <div class="item f">F</div>
  <div class="item g">G</div>
  <div class="item h">H</div>
  <div class="item i">I</div>
  <div class="item j">J</div>
</div>

CSS (Illustrative Snippet):

.c { grid-row-start: 1; grid-row-end: 2; }
.e { grid-row-start: 1; grid-row-end: 3; }
.b, .j { order: 2; }
.a, .i { order: 3; }

Denken Sie daran: Die Änderung der Elementreihenfolge mit order kann die Zugänglichkeit beeinflussen. Bildschirmleser und Tastaturnavigation spiegeln möglicherweise nicht die visuellen Änderungen wider.

Zeilen-Achse-Ausrichtung (justify-self, justify-items):

justify-self richtet einzelne Elemente aus, während justify-items alle Elemente entlang der Zeilenachse ausrichtet. Beide verwenden start, end, center und stretch.

Spalten-Achse-Ausrichtung (align-self, align-items):

align-self richtet einzelne Elemente aus und richtet alle Elemente entlang der Spaltenachse unter Verwendung align-items, start, end und center. stretch aus

Gesamtnetzausrichtung (, justify-content): align-content

(Zeilenachse) und justify-content (Säulenachse) richten Sie das gesamte Gitter in seinem Behälter aus. Zusätzlich zu align-content, start, end und center akzeptieren sie auch stretch, space-around und space-between. space-evenly

Schlussfolgerung:

(FAQS-Abschnitt für die Kürze entfernt.

Das obige ist der detaillierte Inhalt vonSo bestellen und ausrichten Sie Elemente im Netzlayout. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!