Byg komplekse layouter med Postcss-Flexbox

Sep 15, 2025

hvordan

Flexbox er et godt værktøj til at reducere CSS Bloat, og har noget sukker indbygget for at håndtere ting som kildeordre og justering. Men det giver ikke nogen hjælp til at lave de matematik, der skaber kolonne og rende størrelser. Så mange eksperter gentagne gange angiver: Flexbox er rart, men det er ikke et gittersystem.

Vi bør bruge Flexbox, men vi bør ikke smide de grundlæggende begreber bag gittersystemer, der trak os ud af 'Geocities Era' af design:

Gøre kolonner proportional med noget
Brug konsistente gutters i hele dit design

Vi kan bruge et af de mange Flexbox-gittersystemer derude, men i al ærlighed er stilarterne bag disse for det meste de samme som flydebaserede net. Forfattere Tilføj kun display: Flex til beholderen, sammen med nogle hjælperklasser, der obfuscate flexbox egenskaber (for eksempel en klasse som .Grid-lodret-justeret-midten er en forvirring af Juster-genstande: Center ).

Den eneste forskel er, nu kolonner er 'bøjede', hvilket betyder, at vi får det sukker, jeg nævnte tidligere. Men det løser stadig ikke de vigtigste problemer, som grids står over for i dag: Gittersystemer udsender stadig et ton af CSS Bloat, og GRID'er er stadig kedelige.

25 Top-klasse Website Skabeloner

Problemet med net

System bloat: Bootstrap’s generated CSS for the grid alone is 16,435 characters – most of which you’ll never use — System Bloat: Bootstraps genererede CSS for nettet alene er 16.435 tegn - hvoraf de aldrig vil bruge

Gitterforfattere distribuerer typisk store pakker af CSS, der kan kompensere, kildeordre, justere og ændre størrelse i henhold til en vilkårlig enhedsstørrelse. De stoler på Gzip for at afbøde nogle af skaden, men det får det ikke hele. Hvad hvis du ikke har brug for disse ekstra funktioner?

Forudsat at de rammer, du i øjeblikket bruger, tilbyder Gittermixiner, kan den bedste løsning være at lære dem og komponere dine egne kolonner. Dette producerer lidt bloat, men begrænser dine net til fraktioner og giver dig ikke en masse mobilitet mellem forskellige rammer.

Videre til det andet problem. Designere er blevet mentalt låst ind for at gøre alle deres beslutninger baseret på en vis kombination af lige store kolonner. Som følge heraf begynder hele internettet at sløre sammen i en 'stack på mobil; 1/12 kolonnekombinationer på noget andet 'Dystopia.

Flexbox introduceret Flex-Grow. , som befriede os lidt. Nu kan vi indstille størrelser, der ser godt ud og udfylder det resterende rum med et strakt element, men gutters line op konsekvent på hele siden? Er indholdsområder lagt ud med nogen form for proportioner i tankerne, eller er vi tilbage til bare at vinge det?

Indtast dragen

Løsningen på begge disse problemer er indpakket i en funktion kaldet Postcss-myr. Postcss plugins kan bruges med en række bygningsværktøjer som Webpack, Gulp eller blot kommandolinjen. myr blander problemfrit i almindelige CSS (eller enhver preprocessor) med en bedragerisk simpel API, der masker snesevis af mind-Boggling CALC. formler. Det kræver to mix-lignende parametre for at hente en overflod af gittervenlige størrelser.

Et eksempel kan gøre dette klarere: Bredde: Størrelser (1/2) Få (1) vender tilbage Calc (99,99% * 1/2 - (30px - 30px * 1/2)) . Lad os bryde dette ned:

Størrelser () er en rumskilt liste over størrelser. Disse kan være en hvilken som helst kombination af en række størrelser: faste tal i form af gyldige CSS længder ( px Vi Em. Vi % ); fraktioner eller floatnumre (som returnerer hvad der er rester, sans faste tal); og Auto. Nøgleord (som returnerer uanset størrelse, der er tilbage, sansfraktioner og faste tal)
plukke() er et 1-baseret indeks, der henter en gridvenlig størrelse fra din liste. Så Størrelser (1px 2px 3px) Få (2) Ville returnere 2px
Det CALC. Formula er en gridvenlig størrelse

Vi får bredden for hver kolonne i et tokolonne gitter med en enkelt 30px rende mellem dem:

.Grid {
  Display: Flex;
  Flex-wrap: Wrap;
}

.halvt {
  Bredde: Størrelser (1/2) Få (1); / * Returnerer Calc (99,99% * 1/2 - (30PX - 30PX * 1/2)) * /
  Margin-højre: 30px; / * sætter en rende på højre side af hver kolonne * /
}

.half: nth-barn (2n + 2) {/ * starter ved 2. element og begynder at tælle med 2s * /
  Margin-højre: 0; / * fjerner den sidste renden fra hver række * /
}

Dette giver allerede designere magten til at bruge disse størrelser, uanset hvor de ser passende, men lad os dykke dybere.

Størrelser (100px 1/2) Få (1) vender tilbage 100px . Simpelt nok, men hvorfor skulle vi bruge myr til at vende tilbage 100px ? Vi kommer til det om et sekund.

Størrelser (100px 1/2) Få (2) vender tilbage Calc ((99,99% - (100px + (30px * 1))) * 1/2 - (30px - 30px * 1/2)) . Holy Crap. myr finder ud af den samlede størrelse af faste tal, og derefter returnere 1/2 af det, der er tilbage - på en nth gridvenlig måde.

Vi kan bruge disse CALC. formler for at skabe et gitter med a 100px kolonne og to. 1/2 kolonner som det (jeg vil udelade .Grid. Stil for at gemme træer, men sørg for at inkludere dem i din kode):

 .Fixed-size {
  Bredde: Størrelser (100px 1/2) Få (1); / * returnerer 100px (jeg ved, det virker dumt, men bære med mig for lidt længere) * /
  Margin-højre: 30px;
}

.halvt {
  Bredde: Størrelser (100px 1/2) Få (2); / * Returnerer Calc ((99,99% - (100px + (30px * 1))) * 1/2 - (30px - 30px * 1/2)) * /
  Margin-højre: 30px;
}

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

Nu kan vi få nogle tidligere uopnåelige størrelser, men det er ikke super-fleksibelt endnu og kan kræve en masse skrivning, når vi beskæftiger sig med 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-grid ved hjælp af PostCSS-myr. Bemærk, hvordan der ikke er nogen margin-højre på det sidste element i rækken

Preprocessors og postcss ikke altid komme sammen - især når brugerdefineret syntaks er involveret. Heldigvis er Ant's API præprocessor-venlig. Vi kan bruge en postcss-parser som PostCSS-SCS'er med en PREXS-plugin, men denne tilgang bruger en masse ufærdige / ubegrænsede postcss-plugins, der dårligt efterligner SAS-funktionaliteten. Jeg har fundet den bedste workflow er at:

Brug en hurtig præprocessor som node-sass til at se in.scss. til out.css.
Brug postcss til at se out.css. til Final.css.
& lt; link & gt; til Final.css. i din markup.

Dette giver dig det bedste af Preprocessor Syntax med alle postcss plugins dit hjerte ønsker.

Nu for de seje ting. Preprocessors har typisk en måde at slette et bestemt antal gange, mens du leverer en iterator:

 @ for $ i fra 1 til 3 {
  Indhold: $ I; // returnerer indhold: 1; Indhold: 2; Indhold: 3;
}

Med lidt viden om præprocessorer kan du begynde at bruge myr på virkelig interessante måder ...

 $ størrelser: 100px 1/2 1/2;
$ Gutter: 30px;
$ Længde: længde ($ størrelser);

.Column {
  Margin-højre: $ Gutter;

  @for $ jeg fra 1 til $ længde {
    & amp;: nth-barn (# {$ length} n + # {$ i}) {
      Bredde: Størrelser ($ Størrelser) Få ($ I) Gutter ($ Gutter);
    }
  }

  & amp;: nth-barn (# {$ length} n + # {$ length}) {
    Margin-højre: 0;
  }
}

Nu vikler vores uregelmæssigt størrelse kolonner til nye rækker uden yderligere markup. Gå videre og tinker rundt med denne kode. Prøv varierende størrelser, gutters og tilføjer nye størrelser (som 100px Auto 100px).

Dette er et temmelig almindeligt mønster med myr, så jeg har indpakket det op i en ejendom, der også fungerer sammen med Vanilla CSS:

 .Grid {
  generere-grid: Størrelser (100px 1/2 1/2); / * Du kan bestå ekstra muligheder, men pluk () er ikke længere nødvendigt. * /
}

Masser af muligheder.

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 begynder virkelig at vise sin styrke, når vi kombinerer det med præprocessorsløjfer for at skabe layouter, der plejede at være umulige

nth grids er store, når du kender størrelsen og antallet af elementer, der skal bestås, men nogle gange vil du gerne oprette en beholder og bare dumpe nogle tilfældigt størrelse elementer derinde. I disse tilfælde, negativ-margin. Gitter er din bedste indsats. Simpelthen pass. negativ-margin. til myr som sådan:

.Grid {
  Margin: 0 -15px;
}

.Column {
  Bredde: Størrelser (1/3) Få (1) Gitter (negativmargin);
  Margin: 0 15px;
}

Konklusion.

Disse eksempler var bare et lille glimt på alle de seje ting, som postcss-myr kan gøre. Det har et par mere valgfrie parametre og masser af beskrivende fejlhåndtering, men myrens sande magt er dig.

'Dumb' værktøjer, der blot returnerer en smule data, er altid de bedste værktøjer, da de sætter strømmen tilbage i udviklerens hænder. Det er det, som Postcss-myr var designet til at gøre. Hvis du er fascineret, skal du gå til corysimmons.github.io/postcss-ant. for nogle ansigtsmeltende demoer og søde dokumenter.

Denne artikel blev oprindeligt offentliggjort i udstedelse 286 af Net Magazine, Køb det her.

Relaterede artikler:

Hvorfor webdesign har brug for UX-eksperter
10 Top Web Design Bøger til jul 2016
3 Topværktøj til test af web ydeevne

Byg komplekse layouter med Postcss-Flexbox

Problemet med net

Indtast dragen

Preprocessor Looping.

Masser af muligheder.

Konklusion.

hvordan - Mest populære artikler

Sådan tegner du en nakke og skuldre

Sådan laver du en Apple Watch App

Gennemfør gratis og hurtige brugertests med UserCe

21 Måder til at optimere din CSS og fremskynde dit websted

Opret et livagtigt digitalt menneske

Sådan designes isometrisk typografi

Sådan tilføjes sjov CSS-baggrunde til dine websteder

Prep dit arbejde til 3D-udskrivning: 8 Top Tips

Kategorier