Bygg komplekse layouter med postcss-flexbox

Feb 8, 2026

hvordan

[1. 3]

FlexBox er et flott verktøy for å redusere CSS-oppblåst, og har litt sukker bygget inn for å håndtere ting som kildeordre og justering. Men det gir ingen hjelp til å gjøre matematikkene som skaper kolonne og gutter størrelser. Så mange eksperter sier gjentatte ganger: Flexbox er fint, men det er ikke et rutenettsystem.

Vi bør bruke Flexbox, men vi bør ikke kaste bort de grunnleggende konseptene bak rutenettsystemer som trukket oss ut av "Geocities Era" av design:

Lage kolonner proporsjonal med noe
Bruk konsistente rennere gjennom hele designen

Vi kan bruke en av de mange flexbox-gridsystemene der ute, men i all ærlighet er stilene bak disse for det meste det samme som flytebaserte rister. Forfattere bare legge til display: bøy til beholderen, sammen med noen hjelper klasser som obfuscate flexboxegenskaper (for eksempel en klasse som .Grid-vertikal-justerende midt er en obfuscation av Justeringsartikler: Senter ).

Den eneste forskjellen er, nå kolonner er "bøyet", noe som betyr at vi får det sukkeret jeg nevnte tidligere. Men dette løser fremdeles ikke de viktigste problemene som gridene står overfor i dag: Rutenettsystemer utgjør fortsatt massevis av CSS-oppblåst, og gridene er fortsatt kjedelige.

25 Top-Class Website Maler

Problemet med grids

System bloat: Bootstrap’s generated CSS for the grid alone is 16,435 characters – most of which you’ll never use — System Bloat: Bootstraps genererte CSS for rutenettet alene er 16.435 tegn - de fleste du aldri vil bruke

GRID-forfattere distribuerer vanligvis store pakker med CSS som kan kompenseres, kildeordre, justere og endre størrelse i henhold til en vilkårlig enhetsstørrelse. De stoler på gzip for å redusere noen av skadene, men dette får det ikke alt. Hva om du ikke trenger de ekstra funksjonene?

Forutsatt rammen Du bruker for øyeblikket, kan de beste løsningen, den beste løsningen kan være å lære dem og komponere dine egne kolonner. Dette produserer lite oppblåsthet, men begrenser gridene dine til fraksjoner og gir deg ikke mye mobilitet mellom ulike rammer.

Videre til det andre problemet. Designere har blitt mentalt låst inn for å gjøre alle sine beslutninger basert på en viss kombinasjon av like store kolonner. Som et resultat begynner hele Internett å sløre sammen i en "stable på mobilen; 1/12 kolonne kombinasjoner på noe annet 'Dystopia.

FlexBox introdusert flex-grow. , som befriet oss litt. Nå kan vi angi størrelser som ser bra ut og fyller den resterende plassen med et strukket element, men gjør gutters rette opp konsekvent gjennom siden? Er innholdsområder lagt ut med noen form for proporsjoner i tankene, eller er vi tilbake til å bare vinge den?

Gå inn i dragen

Løsningen på begge disse problemene er pakket inn i en funksjon som heter PostCSS-ANT. PostCSS-pluginene kan brukes med en rekke bygningsverktøy som WebPack, GULP eller bare kommandolinjen. maur blander sømløst inn i vanlige CSS (eller enhver preprosessor) med en villedende enkel API som maskerer dusinvis av mind-boggling Calc. formler. Det krever to mixin-lignende parametere for å hente en mengde gridvennlige størrelser.

Et eksempel kan gjøre denne klarere: bredde: Størrelser (1/2) får (1) returnerer Calc (99,99% * 1/2 - (30px - 30px * 1/2)) . La oss bryte dette ned:

Størrelser () er en plass-separert liste over størrelser. Disse kan være en hvilken som helst kombinasjon av en rekke størrelser: faste tall i form av gyldige CSS-lengder ( PX. , Em. , % ); fraksjoner eller flyt tall (som returnerer hva som er igjen, sans faste tall); og Auto Nøkkelord (som returnerer hvilken størrelse som er igjen, sans fraksjoner og faste tall)
plukke() er en 1-basert indeks som henter en rutenlig størrelse fra listen din. Så Størrelser (1px 2px 3px) Få (2) ville returnere 2PX.
De Calc. Formel er en nettvennlig størrelse

Vi får bredden for hver kolonne i et to-kolonne rutenett med en enkelt 30px gutter mellom dem:

.Nett {
  Skjerm: Flex;
  flex-wrap: wrap;
}

.half {
  Bredde: Størrelser (1/2) får (1); / * Returnerer Calc (99.99% * 1/2 - (30px - 30px * 1/2)) * /
  margin-høyre: 30px; / * setter en renn på høyre side av hver kolonne * /
}

.half: nth-barn (2n + 2) {/ * starter på 2dre elementet og begynner å telle med 2s * /
  margin-høyre: 0; / * Fjerner den siste rennen fra hver rad * /
}

Dette gir allerede designere muligheten til å bruke disse størrelsene hvor de passer, men la oss dykke dypere.

Størrelser (100px 1/2) får (1) returnerer 100px. . Enkelt nok, men hvorfor skulle vi trenge å bruke maur til å returnere 100px. ? Vi kommer til det i et sekund.

Størrelser (100px 1/2) får (2) returnerer Calc ((99,99% - (100px + (30px * 1))) * 1/2 - (30px - 30px * 1/2)) . Steike. myr er å finne ut den totale størrelsen på faste tall, og deretter returnere 1/2. Av det som er igjen - i en NTH-gittervennlig måte.

Vi kan bruke disse Calc. formler for å skape et rutenett med a 100px. kolonne og to 1/2. kolonner som så (jeg blir utelatt .Nett Stiler for å redde trær, men sørg for å inkludere dem i koden din):

 .Fixed-size {
  Bredde: Størrelser (100px 1/2) får (1); / * returnerer 100px (jeg vet at det virker dumt, men bjørn med meg litt lenger) * /
  margin-høyre: 30px;
}

.half {
  Bredde: Størrelser (100px 1/2) får (2); / * Returnerer Calc ((99.99% - (100px + (30px * 1))) * 1/2 - (30px - 30px * 1/2)) * /
  margin-høyre: 30px;
}

.half: nth-barn (3n + 3) {
  margin-høyre: 0;
}

Nå kan vi få noen tidligere uoppnåelige størrelser, men det er ikke super-fleksibelt ennå og kan kreve mye skrift når de håndterer mange størrelser.

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 Markup: En minimal markering, to-kolonne, nth rutenett med postcss-maur. Legg merke til hvordan det ikke er margin-rett på det siste elementet i raden

Preprocessors og Postcss kommer ikke alltid sammen - spesielt når tilpasset syntaks er involvert. Heldigvis er Ants API preprocessor-vennlig. Vi kan bruke en PostCSS-Parser som Postcss-SCS med et Precs-plugin, men denne tilnærmingen bruker mange uferdige / unmaintained postcss-plugins som dårlig etterligner Sass funksjonalitet. Jeg har funnet den beste arbeidsflyten til:

Bruk en rask preprosessor som node-sass å se på In.scss til out.css
Bruk postcss for å se på out.css til finale.css
& lt; link & gt; til finale.css i din markering

Dette gir deg det beste av preprocessor syntaks med alle postcss-plugins ditt hjerte ønsker.

Nå for de kule tingene. Preprocessors har vanligvis en måte å slippe et spesifisert antall ganger mens du gir en iterator:

 @ for $ i fra 1 til 3 {
  Innhold: $ i; // returnerer innhold: 1; Innhold: 2; Innhold: 3;
}

Med litt kunnskap om preprocessors, kan du begynne å bruke maur i virkelig interessante måter ...

 $ størrelser: 100px 1/2 1/2;
$ Gutter: 30px;
$ lengde: lengde ($ størrelser);

.kolonne {
  margin-høyre: $ gutter;

  @ for $ i fra 1 til $ lengde {
    & amp;: nth-child (# {$ lengde} n + # {$ i}) {
      Bredde: Størrelser ($ størrelser) Få ($ i) Gutter ($ Gutter);
    }
  }

  &: Nth-Child (# {$ Lengde} N + # {$ Lengde}) {
    margin-høyre: 0;
  }
}

Nå vikler våre uregelmessige størrelse kolonner til nye rader uten ekstra oppslag. Gå videre og tinker rundt med denne koden. Prøv varierende størrelser, takrenner og legge til nye størrelser (som 100px auto 100px).

Dette er et ganske vanlig mønster med myr, så jeg har pakket den opp i en eiendom som fungerer med vanilje CSS også:

 .Grid {
  Generate-Grid: Størrelser (100px 1/2 1/2); / * Du kan passere flere alternativer, men plukke () er ikke lenger nødvendig. * /
}

Mange alternativer

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 begynner virkelig å vise sin styrke når vi kombinerer det med preprosessorsløyfer for å lage layouter som pleide å være umulig

Nth Grids er flotte når du vet størrelsen og antall elementer som skal bestås, men noen ganger vil du lage en beholder og bare dumpe noen tilfeldig størrelse elementer der inne. I disse tilfellene, negativ-margin Gitter er din beste innsats. Bare passere negativ-margin til maur som så:

.Nett {
  margin: 0 -15px;
}

.kolonne {
  Bredde: Størrelser (1/3) Get (1) Grid (negativmargin);
  Margin: 0 15px;
}

Konklusjon

Disse eksemplene var bare et lite glimt i alle de kule tingene Postcss-maur kan gjøre. Den har et par flere valgfrie parametere og mye beskrivende feilhåndtering, men myrens sanne kraft er deg.

'Dumme verktøy som bare returnerer litt data er alltid de beste verktøyene, da de legger strømmen tilbake i utviklerens hender. Det er det som PostCSS-ANT var designet for å gjøre. Hvis du er fascinert, gå til corysimmons.github.io/postcss-ant. for noen ansiktsmeltende demoer og søte dokumenter.

Denne artikkelen ble opprinnelig publisert i utgave 286 i Net Magazine, Kjøp det her.

Relaterte artikler:

Hvorfor webdesign trenger UX-eksperter
10 Topp Web Design Books for Christmas 2016
3 Toppverktøy for testing av web ytelse

Bygg komplekse layouter med postcss-flexbox

Problemet med grids

Gå inn i dragen

Preprocessor looping.

Mange alternativer

Konklusjon

hvordan - Mest populære artikler

Google-lysbilder: Slik designer du et dokument

Hvordan kode Smart Text Effects med CSS

Hvordan tegne mer realistiske figurer

Lag et 3D-landskap i 6 enkle trinn

10 tips for å mestre Apples bilder App

Master brukeropplevelsesstrategi

Topp tips for å skulpturere en skapning i Zbrush

10 Top Houdini Tutorials

Kategorier