Bouw complexe lay-outs met de PostCSS-FLEXBOX

Sep 14, 2025

Procedures

FlexBox is een geweldige tool voor het verminderen van CSS Bloat, en heeft wat suiker ingebouwd om dingen als bronorder en uitlijning aan te pakken. Maar het biedt geen hulp voor het doen van de wiskunde die kolom- en gootmaten creëert. Zoveel experts die herhaaldelijk aangeven: FlexBox is leuk, maar het is geen rastersysteem.

We moeten flexbox gebruiken, maar we mogen de basisbegrippen achter rastersystemen niet weggooien die ons uit de 'geocities-tijdperk' van ontwerp trok:

Maak kolommen evenredig aan iets
Gebruik consistente goten in uw ontwerp

We kunnen een van de vele FLEXBOX-rastersystemen gebruiken, maar in alle eerlijkheid zijn de stijlen achter deze meestal hetzelfde als op float gevestigde roosters. Auteurs voegen gewoon weergave toe: buig naar de container, samen met sommige helperklassen die flexbox-eigenschappen obfuscate (bijvoorbeeld een klasse zoals .grid-verticaal-align-mid is een obfuscatie van Align-items: centrum

Het enige verschil is, nu worden kolommen 'gebogen', wat betekent dat we die suiker krijgen die ik eerder heb genoemd. Maar deze lost nog steeds niet de belangrijkste problemen op die rasters van vandaag worden geconfronteerd: roostersystemen output nog steeds een ton CSS Bloat, en roosters zijn nog steeds saai.

25 Website-sjablonen van topklasse

Het probleem met roosters

System bloat: Bootstrap’s generated CSS for the grid alone is 16,435 characters – most of which you’ll never use — Systeem BOAT: Bootstrap's gegenereerde CSS voor het netwerk alleen is 16.435 tekens - waarvan u de meeste nooit zult gebruiken

Grid-auteurs distribueren typisch enorme pakketten van CSS die kunnen compenseren, bronorder, uitlijnen en formaat worden volgens een willekeurige apparaat. Ze vertrouwen op gzip om een deel van de schade te beperken, maar dit krijgt het niet allemaal. Wat als je die extra functies niet nodig hebt?

Ervan uitgaande dat het kader dat u momenteel gebruikt, biedt rastermengels, de beste oplossing kan zijn om die te leren en uw eigen kolommen samen te stellen. Dit produceert weinig bloat, maar beperkt uw roosters naar fracties en biedt u niet veel mobiliteit tussen verschillende kaders.

Aan het tweede probleem. Ontwerpers zijn mentaal opgesloten geworden om al hun beslissingen te nemen op basis van een bepaalde combinatie van kolommen met hetzelfde formaat. Als gevolg hiervan begint het volledige internet te vervagen in een 'stapel op mobiel; 1/12 kolomcombinaties op iets anders 'Dystopia.

Flexbox geïntroduceerd flex-groei , dat ons een beetje bevrijdde. Nu kunnen we maten instellen die er goed uitzien en de resterende ruimte in vullen met een uitgerekt element, maar line-goten op elkaar staan op de pagina? Zijn inhoudsgebieden aangelegd met een soort proporties in gedachten, of zijn we terug om het gewoon te vellen?

Voer de draak in

De oplossing voor beide problemen is ingepakt in een functie die PostCSS-mier wordt genoemd. PostCSSS-plug-ins kunnen worden gebruikt met een reeks build-tools zoals Webpack, Gulp of gewoon de opdrachtregel. mix mengt naadloos in duidelijke CSS (of een preprocessor) met een bedrieglijk eenvoudige API die tientallen mind-boggling maskeert calc formules. Het vereist twee mixinachtige parameters om een overvloed aan raster-vriendelijke maten te halen.

Een voorbeeld kan dit duidelijker maken: breedte: Maten (1/2) krijgen (1) geeft terug Calc (99,99% * 1/2 - (30px - 30px * 1/2)) Laten we dit breken:

Maten () is een ruimte-gescheiden lijst met maten. Deze kunnen elke combinatie van verschillende maten zijn: vaste nummers in de vorm van geldige CSS-lengtes ( px em fracties of floatnummers (die terugkeren wat overgebleven is, SANS vaste nummers); en auto Sleutelwoorden (die retourneren welke maat ook is over, SANS-fracties en vaste cijfers)
plukken() Is een index op 1 gebaseerde index die een netvriendelijke grootte van uw lijst ophaalt. Zo Maten (1px 2px 3px) krijgen (2) zou terugbrengen 2px
De calc Formule is een netvriendelijke grootte

We krijgen de breedte voor elke kolom in een tweekleurige raster met een enkele 30px-goot tussen hen:

.grid {
  Display: Flex;
  Flex-wrap: wrap;


.voor de helft {
  Breedte: maten (1/2) krijgen (1); / * Retourneert Calc (99,99% * 1/2 - (30px - 30px * 1/2)) * /
  Margin-rechts: 30px; / * zet een goot aan de rechterkant van elke kolom * /


.HALF: NTH-kind (2N + 2) {/ * start bij het 2e element en begint te tellen met 2s * /
  Margin-rechts: 0; / * verwijdert de laatste goot van elke rij * /
}

Dit geeft al ontwerpers de kracht om deze maten te gebruiken waar ze zich ook zien fit, maar laten we dieper duiken.

Maten (100px 1/2) krijgen (1) geeft terug 100px Eenvoudig genoeg, maar waarom zouden we mieren moeten gebruiken om terug te keren 100px Daar komen dat in een seconde.

Maten (100px 1/2) krijgen (2) geeft terug Calc ((99,99% - (100px + (30px * 1)) * 1/2 - (30px - 30px * 1/2)) Heilige Crap. Ant vindt de totale grootte van vaste nummers en vervolgens terug 1/2 van alles wat overblijft - op een nde netvriendelijke manier.

We kunnen deze gebruiken calc formules om een raster te maken met een 100px kolom en twee 1/2 kolommen zoals SO (ik zal het weglaten van de .grid stijlen om bomen te redden, maar zorg ervoor dat u ze opneemt in uw code):

 .Fixed-size {
  Breedte: Maten (100px 1/2) krijgen (1); / * Retourneert 100px (ik weet dat het gek lijkt, maar draag een beetje langer met me) * /
  Margin-rechts: 30px;


.voor de helft {
  Breedte: Maten (100px 1/2) krijgen (2); / * Retourneert Calc ((99,99% - (100px + (30px * 1)) * 1/2 - (30px - 30px * 1/2)) * /
  Margin-rechts: 30px;


.HALF: NTH-kind (3N + 3) {
  Margin-rechts: 0;
}

Nu kunnen we een aantal voorheen onbehoorzame maten krijgen, maar het is nog niet super flexibel en kan veel schrijven vereisen bij het omgaan met veel maten.

Preprocessor 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 — Minimale markup: een minimale markup, twee-kolom, nde raster met behulp van POSTCSS-mier. Merk op hoe er geen marge-rechts is op het laatste element in de rij

Preprocessors en PostCSS kunnen niet altijd opschieten - vooral wanneer aangepaste syntaxis betrokken is. Gelukkig is de API van Ant preprocessor-vriendelijk. We kunnen een postCSS-PARDER gebruiken zoals POSTSSS-SCSS met een PUNTS-plug-in, maar deze benadering gebruikt veel onvoltooide / onverletbare percent-plug-ins die Slecht nabootsen Sass '-functionaliteit. Ik heb gevonden dat de beste workflow is:

Gebruik een snelle preprocessor zoals Node-Sass om te kijken in.Scss naar out.csss
Gebruik de functie om te kijken out.csss naar final.css
& LT; LINK & GT; naar final.css In uw markup

Dit geeft u het beste van de preprocessor-syntaxis met alle POSTSSS-plug-ins uw hartverlening.

Nu voor de coole dingen. Preprocessors hebben meestal een manier om een bepaald aantal keren te lussen tijdens het leveren van een iterator:

 @ For $ I van 1 tot 3 {
  Inhoud: $ I; // retourneert inhoud: 1; Inhoud: 2; Inhoud: 3;
}

Met een beetje kennis van preprocessors, kunt u beginnen met het gebruik van mier op echt interessante manieren ...

 $ Maten: 100px 1/2 1/2;
$ goot: 30px;
$ lengte: lengte ($ maten);

.column {
  Margin-rechts: $ goot;

  @ FOR $ I van 1 tot $ lengte {
    & AMP;: nth-kind (# {$ lengte} n + # {$ i}) {
      Breedte: maten ($ maten) krijgen ($ i) goot ($ goot);
    
  

  & AMP;: nth-kind (# {$ lengte} n + # {$ lengte}) {
    Margin-rechts: 0;
  
}

Nu wikkelen onze kolommen van onregelmatig formaat naar nieuwe rijen zonder extra markup. Ga je gang en tinker rond met deze code. Probeer variërende maten, goten en het toevoegen van nieuwe maten (zoals 100px auto 100px).

Dit is een vrij algemeen patroon met mier, dus ik heb het ingepakt in een woning die ook met vanille CSS werkt:

 .grid {
  Genereer-raster: Maten (100px 1/2 1/2); / * U kunt extra opties passeren, maar pluk () is niet langer nodig.
}

Veel opties

Preprocessor loops: ant really begins to show its strength when we combine it with preprocessor loops to create layouts that used to be impossible — PreProcessor Loops: Mier begint echt zijn kracht te laten zien wanneer we het combineren met preprocessorlussen om lay-outs te creëren die vroeger onmogelijk waren

Nde-roosters zijn geweldig als je weet dat de grootte en het aantal elementen worden gepasseerd, maar soms wil je een container maken en slechts enkele willekeurig formaat elementen naar binnen dumpen. In deze gevallen, negatieve marge Roosters zijn je beste gok. Gewoon passeren negatieve marge naar mieren zoals SO:

.grid {
  Marge: 0 -15px;


.column {
  Breedte: maten (1/3) krijgen (1) raster (negatieve marge);
  Marge: 0 15px;
}

Gevolgtrekking

Deze voorbeelden waren slechts een kleine glimp op alle coole dingen die PostCSSS-mier kan doen. Het heeft een paar optionele parameters en veel beschrijvende foutafhandeling, maar de ware kracht van Mier is jij.

'Domme' hulpmiddelen die eenvoudig een beetje gegevens retourneren, zijn altijd de beste tools, omdat ze de kracht terugzetten in de handen van de ontwikkelaar. Dat is wat PostCSS-mier is ontworpen om te doen. Als je geïntrigeerd bent, ga dan naar Corysimmons.github.io/postcs-ant voor wat face-smeltende demo's en zoete documenten.

Dit artikel is oorspronkelijk gepubliceerd in kwestie 286 van Net Magazine, koop het hier.

Gerelateerde artikelen:

Waarom Webontwerp UX-experts nodig heeft
10 Top Web Design Books voor Kerst 2016
3 Tophulpmiddelen voor het testen van webprestaties

Bouw complexe lay-outs met de PostCSS-FLEXBOX

Het probleem met roosters

Voer de draak in

Preprocessor Looping

Veel opties

Gevolgtrekking

Procedures - Meest populaire artikelen

Aan de slag met vlamschilder

Hoe een komische pagina te maken

Chiaroscuro Art: een stapsgewijze handleiding

Bouw terrein in Houdini 17

Niveau op uw VR-kunst

Fechers tekenen

Aan de slag met diffuus

Verf een originele Tarot-kaart

Categorieën