Foundation 6: Das neue Flex -Gitter

Foundation 6's Flex Grid: Ein leistungsstarkes Layout-System in Flexbox

Foundation 6 führt ein bahnbrechendes Flex-Netz ein und nutzt die Leistung von Flexbox, um reaktionsschnelle und komplexe Webdesigns zu erstellen. Dieses fortschrittliche System erfordert jedoch die Überlegungen zur Kompatibilität von Browser. Es ist unvereinbar mit Legacy -Browsern wie IE8 und IE9.

Schlüsselmerkmale und Überlegungen:

• Optionale Komponente: .row Das Flex -Gitter ist nicht standardmäßig aktiviert. Es ist als Ersatz für das Standardraster konzipiert und kann aufgrund überlappender Klassennamen nicht gleichzeitig verwendet werden (.column,
).
• Verbesserte Steuerung:
Die Elementreihenfolge, die horizontale und vertikale Ausrichtung und andere Layoutaspekte einfach verwalten. Erstellen Sie mehrere Gitter mit jeweils eindeutigen Layouts für die körnige Kontrolle.
• Browser -Unterstützung:
Seine Abhängigkeit von Flexbox bedeutet nur Kompatibilität mit modernen Browsern. Legacy Browser -Unterstützung erfordert das Festhalten am Standardraster.

Implementieren des Flex -Gitters:

app.scss für SASS -Benutzer ändern

:

<code class="language-scss">// @include foundation-grid;
@include foundation-flex-grid;</code>

Wählen Sie für benutzerdefinierte Builds das Flex -Gitter während des Anpassungsprozesses aus.

Grundnutzung:

Ein einfaches 3-Spal-Layout:

<code class="language-html"><div class="row">
  <div class="column small-12 medium-6 large-4">Column 1</div>
  <div class="column small-12 medium-6 large-4">Column 2</div>
  <div class="column small-12 medium-6 large-4">Column 3</div>
</div></code>

Elementbestellung:

order-{value} Flexbox vereinfacht das Element -Neubestehen. Verwenden Sie {size}-order-{value} oder

für die Gerätespezifische Bestellung:

<code class="language-html"><div class="row">
  <div class="column order-2">Second</div>
  <div class="column order-1">First</div>
</div></code>

Gerätsspezifische Bestellung:

<code class="language-html"><div class="row">
  <div class="column small-order-1 medium-order-2">Small: First, Medium: Second</div>
  <div class="column small-order-2 medium-order-1">Small: Second, Medium: First</div>
</div></code>

Ausrichtung:

align-center Einfaches Inhalt des Inhalts horizontal und vertikal unter Verwendung von Klassen wie align-middle, .row usw. angewendet, die entweder auf die .column oder die individuellen

-Elemente angewendet werden. Zum Beispiel gleichmäßig verteilte Menüelemente:

<code class="language-html"><div class="row align-spaced">
  <div class="column small-3">Home</div>
  <div class="column small-3">About</div>
  <div class="column small-3">Contact</div>
</div></code>

überarbeitetes Sass Grid System:

Foundation 6 verbessert das Kerngittermixin und ermöglicht mehrere Gitterdefinitionen mit unterschiedlichen Spaltenzahlen. Dies ermöglicht hoch angepasste Layouts:

<code class="language-scss">.row-listing {
  @include grid-row(18) {
    .primary { @include grid-column(10); }
    .secondary { @include grid-column(4); }
    .tertiary { @include grid-column(4); }
  }
}</code>

Schlussfolgerung:

Flex Grid von

Foundation 6 bietet im Vergleich zu seinem Vorgänger eine überlegene Flexibilität und Kontrolle über das Layout. Wenn der Legacy -Browser -Support keine Einschränkung ist, ist dies der empfohlene Ansatz für optimierte Entwicklung und anpassbare Designs. Das Enhanced Sass Grid Mixin ermöglicht Entwickler weiter mit hoch angepassten Gittersystemen.

Das obige ist der detaillierte Inhalt vonFoundation 6: Das neue Flex -Gitter. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!