Bygg komplexa layouter med Postcss-Flexbox

Sep 16, 2025

Hur

Flexbox är ett bra verktyg för att minska CSS-uppblåsningen, och har lite socker inbyggda för att hantera saker som källorder och anpassning. Men det erbjuder inte någon hjälp för att göra matematik som skapar kolumn- och gutterstorlekar. Så många experter upprepade gånger: Flexbox är trevligt, men det är inte ett rutnät.

Vi bör använda Flexbox, men vi borde inte kasta bort de grundläggande begreppen bakom nätsystem som drog oss ut ur "geocities era" av design:

Gör kolumner proportionella mot någonting
Använd konsekventa takrännor i hela din design

Vi kan använda en av de många Flexbox-nätsystemen där ute, men i all ärlighet är stilarna bakom dessa mestadels samma som flottörbaserade nät. Författare lägger bara till display: Flex till behållaren, tillsammans med några hjälparklasser som obfuscate Flexbox-egenskaper (till exempel en klass som .Grid-vertikal-justerade-mitten är en obfuscation av Justeringsprodukter: Centrum ).

Den enda skillnaden är, nu är kolumner "böjda", vilket innebär att vi får det sockret jag nämnde tidigare. Men det här fortfarande inte löser de viktigaste problemen som nätet står inför idag: Gridsystem som fortfarande matas ut ett ton av CSS-uppblåsning, och galler är fortfarande tråkiga.

25 Toppklassiga webbplatsmallar

Problemet med galler

System bloat: Bootstrap’s generated CSS for the grid alone is 16,435 characters – most of which you’ll never use — Systemblock: Bootstraps genererade CSS för nätet Endast är 16,435 tecken - varav de kommer aldrig att använda

Gridförfattare distribuerar vanligtvis stora förpackningar av CSS som kan kompensera, källorder, justera och ändra storlek på någon godtycklig enhetsstorlek. De är beroende av gzip för att mildra några skador, men det får inte allt. Vad händer om du inte behöver de extra egenskaperna?

Om du antar det ramar du använder Erbjudanden Grid Mixins, kan den bästa lösningen vara att lära dem och komponera dina egna kolumner. Detta ger lite bloat, men begränsar dina galler till fraktioner och erbjuder dig inte mycket rörlighet mellan olika ramar.

Vidare till den andra frågan. Designers har blivit mentalt låsta för att göra alla sina beslut utifrån en viss kombination av lika stora kolumner. Som ett resultat börjar hela Internet att suddas ihop i en "stack på mobilen; 1/12 Kolumnkombinationer på något annat dystopi.

Flexbox introducerades böjning , som befriade oss lite. Nu kan vi ställa in storlekar som ser bra ut och fyller i det återstående utrymmet med ett utsträckt element, men gör gutters upp i konsekvent hela sidan? Är innehållsområden som anges med någon form av proportioner i åtanke, eller är vi tillbaka till bara vinge det?

Gå in i draken

Lösningen på båda dessa problem är inslagna i en funktion som heter Postcss-Ant. Postcss-plugins kan användas med en rad byggverktyg som webbhacka, gulp eller helt enkelt kommandoraden. Ant blandar sig smidigt i vanlig CSS (eller någon förprocessor) med en bedrägligt enkel API som maskerar dussintals sinne-boggling beräkna formler. Det kräver två mixin-liknande parametrar för att hämta en mängd rutnätstorlekar.

Ett exempel kan göra denna tydligare: Bredd: Storlekar (1/2) Få (1) återvända Calc (99,99% * 1/2 - (30px - 30px * 1/2)) . Låt oss bryta ner det här:

Storlekar () är en rymdseparerad lista över storlekar. Dessa kan vara vilken som helst kombination av olika storlekar: fasta nummer i form av giltiga CSS-längder ( px , em , % ); fraktioner eller flottörnummer (som returnerar vad som än är kvar, sans fasta siffror); och bil Nyckelord (som återkommer oavsett storlek är kvar, sansfraktioner och fasta nummer)
plocka() är ett 1-baserat index som hämtar en gallervänlig storlek från din lista. Så Storlekar (1px 2px 3px) Få (2) skulle återvända 2px
De beräkna Formeln är en gallervänlig storlek

Vi får bredden för varje kolumn i ett två-kolonnät med en enda 30px-rännan mellan dem:

.grid {
  Visa: Flex;
  Flex-wrap: Wrap;
}

.half {
  Bredd: Storlekar (1/2) Få (1); / * Returnerar Calc (99,99% * 1/2 - (30px - 30px * 1/2)) * /
  marginal-höger: 30px; / * sätter en rännan på höger sida av varje kolumn * /
}

.half: nth-barn (2n + 2) {/ * börjar vid 2: a elementet och börjar räkna med 2s * /
  marginal-höger: 0; / * Avlägsnar den sista rännan från varje rad * /
}

Detta ger redan designers kraften att använda dessa storlekar var de än passar, men låt oss dyka djupare.

Storlekar (100px 1/2) Få (1) återvända 100px . Enkelt nog, men varför skulle vi behöva använda myr för att återvända 100px ? Vi kommer till det på en sekund.

Storlekar (100px 1/2) Få (2) återvända Calc ((99,99% - (100px + (30px * 1))) * 1/2 - (30px - 30px * 1/2)) . Helig skit. myr är att ta reda på den totala storleken på fasta nummer och sedan återvända 1/2 av vad som helst kvar - på ett nth galler vänligt sätt.

Vi kan använda dessa beräkna formler för att skapa ett rutnät med a 100px kolumn och två 1/2 kolumner som så (jag kommer att utelämna .rutnät Stilar för att rädda träd, men var noga med att inkludera dem i din kod):

 .Fixed-size {
  Bredd: Storlekar (100px 1/2) Få (1); / * Returnerar 100px (jag vet att det verkar dumt men bära med mig lite längre) * /
  marginal-höger: 30px;
}

.half {
  Bredd: Storlekar (100px 1/2) Få (2); / * Returnerar Calc ((99,99% - (100px + (30px * 1))) * 1/2 - (30px - 30px * 1/2)) * /
  marginal-höger: 30px;
}

.half: nth-barn (3N + 3) {
  marginal-höger: 0;
}

Nu kan vi få några tidigare obehöriga storlekar, men det är inte super-flexibelt än och kan kräva mycket skrivning när de hanterar många storlekar.

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 — Minimal markering: En minimal markering, två kolumn, nth galler med postcss-myr. Lägg märke till hur det inte finns någon marginal - rätt på det sista elementet i raden

Förprocessorer och postcss kommer inte alltid överens - speciellt när den anpassade syntaxen är inblandad. Lyckligtvis är Ant's API preprocessorvänlig. Vi kan använda en postcss-parser som postcss-scss med ett Precss-plugin, men det här tillvägagångssättet använder många oavslutade / oanvända postcss-plugins som dåligt mimic sass funktionalitet. Jag har hittat det bästa arbetsflödet är att:

Använd en snabb preprocessor som nod-sass att titta på in.scss till OUT.CSS
Använd postcss för att titta på OUT.CSS till final.css
& lt; länk & gt; till final.css I din markering

Detta ger dig det bästa av preprocessorsyntax med alla postcss-plugins ditt hjärta önskar.

Nu för de coola sakerna. Förprocessorer har vanligtvis ett sätt att loop ett angivet antal gånger medan du tillhandahåller en iterator:

 @for $ i från 1 till 3 {
  Innehåll: $ i; // returnerar innehåll: 1; Innehåll: 2; Innehåll: 3;
}

Med lite kunskap om preprocessorer kan du börja använda myr på riktigt intressanta sätt ...

 $ Storlekar: 100px 1/2 1/2;
$ gutter: 30px;
$ Längd: Längd ($ storlekar);

.
  marginal-höger: $ gutter;

  @ för $ jag från 1 till $ längd {
    & amp;: nth-barn (# {$ längd} n + # {$ i}) {
      Bredd: Storlekar ($ Storlekar) Få ($ i) Gutter ($ Gutter);
    }
  }

  & amp;: nth-barn (# {$ längd} n + # {$ längd}) {
    marginal-höger: 0;
  }
}

Nu slår våra oregelbundna storlekskolonner till nya rader utan ytterligare markering. Gå vidare och tinker runt med den här koden. Prova varierande storlekar, takrännor och lägger till nya storlekar (som 100px Auto 100px).

Detta är ett ganska vanligt mönster med myr, så jag har lagt upp det i en fastighet som fungerar med Vanilla CSS:

 .grid {
  Generera-galler: Storlekar (100px 1/2 1/2); / * Du kan klara ytterligare alternativ, men plock () behövs inte längre. * /
}

Massor av alternativ

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: Ant börjar verkligen visa sin styrka när vi kombinerar det med förbehandlingsslingor för att skapa layouter som brukade vara omöjliga

nth galler är bra när du känner till storleken och antalet element som ska passeras, men ibland vill du skapa en behållare och bara dumpa några slumpmässigt medelstora element där inne. I dessa fall, negativ marginal Grids är din bästa satsning. Helt enkelt passera negativ marginal att myra som så:

.grid {
  marginal: 0 -15px;
}

.
  Bredd: Storlekar (1/3) Få (1) rutnät (negativmarginal);
  Marginal: 0 15px;
}

Slutsats

Dessa exempel var bara en liten glimt på alla de coola saker som postcss-myran kan göra. Det har ett mer valfria parametrar och massor av beskrivande felhantering, men Ant sanna makt är du.

"Dumb" -verktyg som helt enkelt returnerar lite data är alltid de bästa verktygen, eftersom de lägger strömmen tillbaka i utvecklarens händer. Det är vad Postcss-Ant var utformad för att göra. Om du är fascinerad, gå till corysimmons.github.io/postcss-ant För vissa ansiktsmältande demos och söta dokument.

Denna artikel publicerades ursprungligen i utgåva 286 av Net Magazine, Köp det här.

Relaterade artiklar:

Varför webbdesign behöver UX-experter
10 Top Web Design Böcker för jul 2016
3 Toppverktyg för testning av webbutveckling

Bygg komplexa layouter med Postcss-Flexbox

Problemet med galler

Gå in i draken

Preprocessor looping

Massor av alternativ

Slutsats

Hur - Mest populära artiklar

Hur stoppar du glasögonen upp när du bär en ansiktsmask

Hur man ritar en ros: nybörjare och avancerade tips

Hur man gör en fotokollage i Photoshop CC

Bygg en SEO-vänlig huvudkomponent för NEXTJS / reagera

Lägg till UI-animeringar på din webbplats

Uppbygga en Flash-webbplats 2004 för 2018

Skapa en digital etch en skiss

Hur man kodar en förstärkt verklighetsmarkör

Kategorier