Erstellen Sie komplexe Layouts mit Postcss-Flexbox

Sep 13, 2025

wie man

Flexbox ist ein großartiges Werkzeug zum Reduzieren von CSS-BLOAT und hat etwas Zucker, der mit Dingen wie Quellreihenfolge und Ausrichtung eingebaut ist. Es bietet jedoch keine Hilfe für die MATHs, die Säulen- und Rinnengrößen erstellt. So viele Experten staatlich sagen: FlexBox ist nett, aber es ist kein Gittersystem.

Wir sollten Flexbox verwenden, aber wir sollten die grundlegenden Konzepte hinter Gittersystemen nicht wegwerfen, die uns aus den "Geocities Era" des Designs herausgezogen haben:

Erstellen Sie Säulen proportional zu etwas
Verwenden Sie konsistente Rinnen während Ihres gesamten Designs

Wir können eines der vielen FlexBox-Gitter-Systeme da draußen verwenden, aber in allen Ehrlichkeiten sind die Stile dahinter meistens dasselbe wie Float-basierte Gitter. Autoren fügen einfach Display hinzu: Flex in den Container, zusammen mit einigen Helferklassen, die FlexBox-Eigenschaften (zum Beispiel eine Klasse mögen) .grid-Vertical-Align-Mid ist eine Verschleierung von Richtige Gegenstände: Zentrum ).

Der einzige Unterschied ist, jetzt sind Säulen "gebeugt", was bedeutet, dass wir diesen Zucker bekommen, den ich früher erwähnt habe. Dies löst jedoch immer noch nicht die Hauptprobleme, die das Gitter von heute angeht: Gittersysteme gibt immer noch eine Tonne CSS-BLOAT aus, und Gitter sind immer noch langweilig.

25 Top-Class-Website-Vorlagen

Das Problem mit Gittern

System bloat: Bootstrap’s generated CSS for the grid alone is 16,435 characters – most of which you’ll never use — System Bloat: Die erzeugte CSS von Bootstrap für das Gitter allein beträgt 16.435 Zeichen - die meisten, von denen Sie nie verwenden werden

Grid-Autoren verteilen in der Regel riesige Packungen von CSS, die mit der Vergleichung, Quellenreihenfolge gemäß einer beliebigen Gerätegröße ausgleichen und die Größe ausgleichen können. Sie verlassen sich auf GZIP, um einen Teil des Schadens zu mildern, aber das bringt es nicht alles. Was ist, wenn Sie diese zusätzlichen Funktionen nicht benötigen?

Angenommen, das von Ihnen verwendete Framework bietet Grid Mixins, die beste Lösung ist möglicherweise, um diejenigen zu erfahren und Ihre eigenen Säulen zu komponieren. Dies ergibt wenig Blastein, begrenzt jedoch Ihre Gitter an Fraktionen und bietet Ihnen nicht viel Mobilität zwischen verschiedenen Rahmenbedingungen.

Auf das zweite Problem. Designer sind geistig eingerastet, um alle ihre Entscheidungen auf der Grundlage einer bestimmten Kombination von gleichgroßen Säulen zu treffen. Infolgedessen beginnt das gesamte Internet in einem "Stapel auf Mobiltelefon zu verschwimmen; 1/12 Säulenkombinationen auf einem anderen Dystopie.

Flexbox eingeführt. wachsen , das uns ein wenig freigelegt hat. Jetzt können wir Größen einstellen, die gut aussehen und den verbleibenden Raum mit einem gestreckten Element ausfüllen, aber Dachrinnen stimmen konsequent auf der gesamten Seite an? Sind Inhaltsbereiche mit beliebigen Arten von Anteilen angelegt, oder sind wir zurück, um es einfach zu wenden?

Betrete den Drachen

Die Lösung für diese beiden Probleme wird in einer Funktion namens Postcss-Ameise eingewickelt. PostcsSS-Plugins können mit einem Bereich von Build-Tools wie WebPack, GULP oder einfach die Befehlszeile verwendet werden. Ameise mischt sich nahtlos in einfache CSS (oder jeden Präprozessor) mit einer täuschend einfachen API, die Dutzende des Geistesmaskens maskiert berechnen Formeln. Es erfordert zwei Mixin-ähnliche Parameter, um eine Fülle gitterfreundlicher Größen abzurufen.

Ein Beispiel kann dies klarer machen: Breite: Größen (1/2) Holen (1) kehrt zurück Calc (99,99% * 1/2 - (30px - 30px * 1/2)) . Lass uns das aufbrechen:

Größen () ist eine platzabscheidende Liste von Größen. Diese können eine beliebige Kombination aus einer Vielzahl von Größen sein: Festnummern in Form gültiger CSS-Längen ( PX. , em , % ); Fraktionen oder Float-Nummern (welche zurückkehren, was übrig bleibt, sans feste Zahlen); und Auto Keywords (welche zurückgibt, was auch immer die Größe übrig ist, Sans-Fraktionen und feste Zahlen)
zupfen() ist ein 1-basierter Index, der eine netzfreundliche Größe aus Ihrer Liste abgibt. So Größen (1px 2Px 3PX) GET (2) würden zurückkehren 2px.
Das berechnen Formel ist eine gitterfreundliche Größe

Wir erhalten die Breite für jede Spalte in einem Zwei-Säulengitter mit einer einzelnen 30px-Rinne zwischen ihnen:

.Gitter {
  Anzeige: Flex;
  Flex-Wrap: Wrap;
}

.Hälfte {
  Breite: Größen (1/2) GET (1); / * Returns Calc (99,99% * 1/2 - (30px - 30px * 1/2)) * /
  Margin-Right: 30px; / * legt eine Rinne auf die rechte Seite jeder Spalte * /
}

.half: NTH-Kind (2n + 2) {/ * beginnt am 2. Element und beginnt mit dem Zählen von 2s * /
  Margin-Right: 0; / * Entfernt die letzte Rinne aus jeder Zeile * /
}

Dies gibt bereits Designer die Macht, diese Größen zu verwenden, wo immer sie passen, aber tauchen wir tiefer.

Größen (100px 1/2) Get (1) kehrt zurück 100px. . Einfach genug, aber warum sollten wir an der Erklärung von Ameisen verwenden müssen 100px. ? Wir kommen in einer Sekunde dazu.

Größen (100px 1/2) Get (2) kehrt zurück Calc ((99,99% - (100px + (30px * 1))) * 1/2 - (30px - 30px * 1/2)) . Heiliger Strohsack. Ameise ermittelt die Gesamtgröße der festen Zahlen und kehrt dann zurück 1/2. was auch immer übrig bleibt - auf ntritterfreundliche Weise.

Wir können diese verwenden berechnen Formeln, um ein Gitter mit einem zu erstellen 100px. Säule und zwei Jahre 1/2. Säulen wie so (ich werde das weglassen .Gitter Stile, um Bäume zu retten, aber lassen Sie sie unbedingt in Ihren Code einfügen):

. Fixed-Size {
  Breite: Größen (100px 1/2) Get (1); / * kehrt 100px zurück (ich weiß, dass es dumm erscheint, aber für ein bisschen länger mit mir ertragen) * /
  Margin-Right: 30px;
}

.Hälfte {
  Breite: Größen (100px 1/2) Get (2); / * Returns Calc ((99,99% - (100px + (30px * 1))) * 1/2 - (30px - 30px * 1/2)) * /
  Margin-Right: 30px;
}

.half: nth-kind (3n + 3) {
  Margin-Right: 0;
}

Jetzt können wir einige bisher unerreichbare Größen erhalten, aber es ist noch nicht superflexibel und kann beim Umgang mit vielen Größen viel Schreiben erfordern.

Präprozessor Looping.

Minimal markup: A minimal markup, two-column, nth grid using postcss-ant. Notice how there is no margin-right on the last element in the row — Minimales Markup: Ein minimaler Markup, zwei Spalte, nTh Gitter mit Postcss-Ameise. Beachten Sie, wie kein Margin-Recht auf dem letzten Element in der Reihe ist

Vorprozessoren und Postcss kommen nicht immer miteinander aus - insbesondere wenn benutzerdefinierte Syntax beteiligt ist. Glücklicherweise ist die API der Ameise vorprozessorfreundlich. Wir können ein Postcss-Parser wie Postcss-SCS mit einem PRECSSS-Plugin verwenden, aber dieser Ansatz verwendet viele unvollendete / unbekannte PostcsSS-Plugins, die eine schlechte Mimic-SASS-Funktionalität beeinträchtigen. Ich habe den besten Workflow gefunden, ist:

Verwenden Sie einen schnellen Präprozessor wie Node-SASS, um anzusehen in.scss. zu out.css.
Verwenden Sie Postcss, um anzusehen out.css. zu endgal.css.
& lt; link & gt; zu endgal.css. in deiner MarkUp

Dies gibt Ihnen das Beste von der Preprocessor-Syntax mit allen Postcss-Plugins, die Ihr Herz wünscht.

Nun für das coole Zeug. Präprozessoren haben in der Regel einen Weg, um eine bestimmte Anzahl von Zeiten zu lösen, während er einen Iterator bereitstellt:

 @For $ i von 1 bis 3 {
  Inhalt: $ i; // Gibt den Inhalt zurück: 1; Inhalt: 2; Inhalt: 3;
}

Mit wenig Kenntnis der Präprozessoren können Sie mit der Verwendung von Ant in wirklich interessanten Arten beginnen ...

 $ Größen: 100px 1/2 1/2;
$ Rinne: 30px;
$ Länge: Länge ($ Größen);

.Säule {
  Margin-Right: $ Rinne;

  @For $ i von 1 bis länge {
    & amp;: nth-kind (# {$ länge} n + # {$ i}) {
      Breite: Größen ($ Größen) Get ($ i) Rinne ($ Rinne);
    }
  }

  & amp;: nth-kind (# {$ länge} n + # {$ länge}) {
    Margin-Right: 0;
  }
}

Nun sind unsere unregelmäßigen Säulen ohne zusätzliche Markierung auf neue Zeilen wickeln. Machen Sie weiter und basteln Sie sich mit diesem Code. Versuchen Sie unterschiedliche Größen, Dachrinnen und Hinzufügen neuer Größen (wie 100px Auto 100px).

Dies ist ein ziemlich häufiges Muster mit der Ameise, also habe ich es in eine Immobilie eingewickelt, die auch mit Vanille CSS arbeitet:

 .grid {
  Generate-Gitter: Größen (100px 1/2 1/2); / * Sie können zusätzliche Optionen weitergeben, aber PLP () ist nicht mehr erforderlich. * /
}

Viele Optionen

Preprocessor loops: ant really begins to show its strength when we combine it with preprocessor loops to create layouts that used to be impossible — Vorprozessor-Loops: Ameise beginnt wirklich, seine Stärke zu zeigen, wenn wir es mit Präprozessorschleifen kombinieren, um Layouts zu erstellen, die früher unmöglich waren

NTH-Gitter sind großartig, wenn Sie wissen, dass die Größe und Anzahl der zu verabschiedeten Elemente kennt, aber manchmal möchten Sie einen Container erstellen und einfach einige zufällig große Elemente dort ablegen. In diesen Fällen, negativer Marge Gitter sind Ihre beste Wette. Einfach passieren negativer Marge an Ameise wie so:

 .grid {
  Marge: 0 -15px;
}

.Säule {
  Breite: Größen (1/3) Erhalten (1) Gitter (Negativrand);
  Marge: 0 15px;
}

Fazit

Diese Beispiele waren nur ein winziger Blick über alle coolen Dinge, die postcss-ant tun kann. Es verfügt über ein paar optionale Parameter und viel beschreibende Fehlerbehandlung, aber die wahre Macht der Ameise ist Sie.

'Dumme' Werkzeuge, die einfach ein wenig Daten zurückgeben, sind immer die besten Werkzeuge, da sie die Macht wieder in die Hände des Entwicklers legen. Das wurde postcss-ant entwickelt. Wenn Sie fasziniert sind, gehen Sie nach corysimmons.github.io/postcss-ant. für einige Gesichtsschmelzende Demos und süße Dokumente.

Dieser Artikel wurde ursprünglich in Ausgabe 286 des Netzmagazins veröffentlicht, Kaufen Sie es hier.

Zum Thema passende Artikel:

Warum Webdesign UX-Experten benötigt
10 Top-Webdesign-Bücher für Weihnachten 2016
3 Top-Tools zum Testen der Webleistung

Erstellen Sie komplexe Layouts mit Postcss-Flexbox

Das Problem mit Gittern

Betrete den Drachen

Präprozessor Looping.

Viele Optionen

Fazit

wie man - Die beliebtesten Artikel

Cinema 4D-Tutorials: 13 der besten

Porträtfotografie: So nehmen Sie perfekte Portraits

So fügen Sie Ihre Lebenszeichnungen Energie hinzu

Geisterhafte Texturen mit Mischmedien-Techniken erstellen

Erstellen Sie eine komplexe 3D-Science-Szene in Mixer

Malen Sie eine klassische Märchen-Szene mit Procreate

So prototype eine mobile App mit Origami Studio

Erstellen sensationeller Sonnenuntergänge in Photoshop

Kategorien