Vertikale Ausrichtung erreichen (Danke, Subgrid!)

Moderne Tools für Webdesign haben die vertikalen Ausrichtungsfunktionen erheblich verbessert. Frühe Website-Layouts, oft 960px breit, stützten sich stark auf die horizontale Ausrichtung mit 12-Spal-Gittern. Das Aufkommen von Medienabfragen führte gleichzeitig viele Probleme zu, führte gleichzeitig neue Herausforderungen ein, insbesondere die Ausrichtung, wenn Elemente reflektieren oder neu positioniert werden.

Betrachten Sie ein gemeinsames Szenario: eine "Balken", die Button -Gruppen enthält, jeweils innerhalb von a<fieldset></fieldset> mit a<legend></legend> . Auf größeren Bildschirmen ist die Ausrichtung unkompliziert. Ein einfacher CSS -Ansatz, der Floats verwendet, behandelt dies und bietet reaktionsschnelles Verhalten an kleineren Haltepunkten:

 .Accessibility-Tools Fieldset {
  Breite: 48%;
  float: links;
  Marge-Right: 1%;
}

/ * Mobil */
@media nur Bildschirm und (max. Width: 480px) {
  .Accessibility-Tools Fieldset {
    Breite: 100%;
  }
}

Auf kleineren Bildschirmen wird jedoch die vertikale Fehlausrichtung ersichtlich. Während Pixel-basierte CSS-Lösungen mit Medienabfragen festgelegt sind, können dieser Ansatz flexibilisch fehlt und auf "magische Zahlen" basiert, die an bestimmte Inhalte gebunden sind:

 / * Mobil */
@media nur Bildschirm und (max. Width: 480px) {
  Legende {
    Breite: 160px;
  }
  Taste {
    Breite: 130px;
  }
}

Diese Inflexibilität in Verbindung mit der Abhängigkeit von Medienabfragen (die ich minimieren möchte) erfordert eine anpassungsfähigere Lösung. Die ideale Lösung sollte es Schaltflächen und Etiketten ermöglichen, auf das reagieren:

1. Verfügbarer Raum
2. Inhaltsabmessungen
3. Umliegende Elemente

Medienabfragen fallen kurz, weil sie den umgebenden Raum nicht betrachten, wie in Heydon Pickings "The Flexbox Holy Albatross" dargestellt. Das gewünschte Verhalten ist für das zweite<fieldset></fieldset> Nur um zu wickeln, wenn beide Felder nicht mehr in eine einzelne Linie passen.

Flexbox und Raster: Erste Versuche

Flexbox bietet mit seiner flex-wrap: wrap -Eigenschaft eine verbesserte Flexibilität und ermöglicht es, Elemente auf mehrere Leitungen zu fließen. Für eine perfekte vertikale Ausrichtung wird jedoch immer noch eine min-width benötigt.

CSS Grid, das für die Layoutverwaltung entwickelt wurde, bietet Keywords auto-fit und auto-fill (innerhalb von repeat() ) für Multi-Line-Layouts ohne Medienabfragen. Mit auto-fit erreichen wir:

 .Wrapper-Accessibility-Tools {
  Anzeige: Grid;
  Grid-Template-Säulen: Wiederholen (automatisch, 450px);
  Raster-Lücke: 10px;
}

Für eine optimale Ausrichtung können jedoch noch absolute Breitenwerte erforderlich sein. Flexible Gitterspuren mit fr -Einheiten oder minmax() bieten weitere Verbesserungen, aber Einschränkungen ergeben sich, da nur direkte Kinder des Netzbehälters als Rasterelemente betrachtet werden.

Die subgridische Lösung

CSS Grid Level 2 führt subgrid ein und ermöglicht es verschachtelte Gitter, die Spur -Größe ihrer Eltern zu erben. Dies löst das Problem unabhängiger verschachtelter Gitter. Subgrid ermöglicht es Elementen in Kindernetze, auf Inhalte in Geschwisternetze zu reagieren.

Für unser Button-Beispiel wird das übergeordnete Netz unter Verwendung von auto-fill und minmax() definiert:

 .Wrapper-Accessibility-Tools {
  Anzeige: Grid;
  Grid-Template-Säulen: Wiederholung (Auto-Fill, Minmax (150px, 1fr));
  Raster-Lücke: 10px;
}

Kindernetze verwenden subgrid , um die Spaltenspuren des Elternteils zu erben:

 .Sub-Grid {
  Anzeige: Grid;
  Grid-Säule: Span 3;
  Grid-Template-Säulen: Subgrid;
  Ausrichtung: Zentrum;
}

Dies gewährleistet eine konsequente Ausrichtung und ein reaktionsschnelles Verhalten. Tasten und Etiketten passen sich an den verfügbaren Platz an und wickeln Sie sich bei Bedarf nur auf neue Zeilen ein.

Browserkompatibilität und weitere Lesen

Der Subgrid -Browserunterstützung ist derzeit begrenzt (hauptsächlich Firefox). CSS -Feature -Abfragen können Fallbacks für andere Browser bereitstellen. Ausführliche Informationen zum Browser -Kompatibilität finden Sie unter caniuse.com. Weitere Informationen zu diesem Thema enthalten Artikel von Miriam Suzanne, Rachel Andrew und Heydon Pickering (Links im Originalartikel). Ein Wrapper um die Feldersets ist möglicherweise erforderlich, um einen Fehler mit Formularelementen, Raster und Flexbox zu verarbeiten. Die display des Fieldset kann auf contents eingestellt werden, um dies zu beheben.

Das obige ist der detaillierte Inhalt vonVertikale Ausrichtung erreichen (Danke, Subgrid!). Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!