Construiți layout-uri complexe cu PostCss-Flexbox

Sep 16, 2025

să

Flexbox este un instrument excelent pentru reducerea CSS Bloat și are un zahăr construit pentru a face față lucrurilor cum ar fi ordinea sursă și alinierea. Dar nu oferă niciun ajutor pentru a face matematica care creează dimensiuni de coloană și jgheab. După cum mulți experți stau în mod repetat: FlexBox este frumos, dar nu este un sistem de rețea.

Ar trebui să folosim FlexBox, dar nu ar trebui să aruncăm conceptele de bază din spatele sistemelor de rețea care ne-au tras din "epoca geocităților" de proiectare:

Face coloane proporționale cu ceva
Utilizați jgheaburi consistente pe tot parcursul dvs.

Putem folosi unul dintre numeroasele sisteme de rețea Flexbox, dar în toată onestitatea, stilurile din spatele lor sunt în cea mai mare parte la felul în care se află grilele pe bază de float. Autorii adaugă doar afișare: Flex la container, împreună cu unele clase de ajutor care obfuscate proprietăți FlexBox (de exemplu, o clasă cum ar fi .Grid-vertical-align-MID este o obfuscare a Align-elemente: centru ).

Singura diferență este că acum coloanele sunt "flexate", ceea ce înseamnă că am primit zahărul pe care l-am menționat mai devreme. Dar acest lucru încă nu rezolvă principalele probleme pe care rețelele se confruntă astăzi: sistemele de rețea încă depășește o tonă de BLOT CSS, iar grilele sunt încă plictisitoare.

25 Șabloane de site-uri de top

Problema cu grilele

System bloat: Bootstrap’s generated CSS for the grid alone is 16,435 characters – most of which you’ll never use — System Bloat: CSS generat de Bootstrap pentru grilă este de 16.435 de caractere - majoritatea dintre care nu o veți folosi niciodată

Autorii de grilă distribuie de obicei pachete uriașe de CSS care pot compensa, ordinea sursă, alinierea și redimensionarea conform unei dimensiuni a dispozitivului arbitrare. Ei se bazează pe GZIP pentru a atenua unele daune, dar acest lucru nu-i face totul. Dacă nu aveți nevoie de aceste caracteristici suplimentare?

Presupunând ca cadrul pe care îl utilizați în prezent oferă amestecuri de grilă, cea mai bună soluție ar putea fi să aflați aceștia și să vă compuneți propriile coloane. Acest lucru produce puțină bloat, dar limitează rețelele dvs. la fracțiuni și nu vă oferă o mulțime de mobilitate între diferite cadre.

La a doua problemă. Designerii au devenit blocați mental pentru a face toate deciziile lor pe baza unei anumite combinații de coloane de dimensiuni egale. Ca rezultat, întregul internet începe să blocheze împreună într-un "stivă pe telefon mobil; 1/12 combinații de coloane pe orice altceva "Dystopia.

Flexbox a introdus Flex-cresc , care ne-a eliberat puțin. Acum putem seta dimensiuni care arata bine si completati spatiul rămas cu un element întins, dar face jgheaburile se aliniază în mod constant pe tot parcursul paginii? Sunt zone de conținut prevăzute cu orice fel de proporții în minte sau ne întoarcem doar la aripit?

Introduceți dragonul.

Soluția la ambele probleme este înfășurată într-o funcție numită postCss-furnică. Plugin-urile poștale pot fi utilizate cu o gamă largă de instrumente de construire, cum ar fi Webpack, Gulp sau pur și simplu linia de comandă. Ant se amestecă fără probleme în CSS simple (sau orice preprocesor) cu un API puțin înșelător care mărește zeci de minte-bogglare Calc formule. Este nevoie de doi parametri asemănători mixinului pentru a aduce o multitudine de dimensiuni prietenoase cu rețeaua.

Un exemplu ar putea face acest lucru mai clar: lățimea: Dimensiuni (1/2) Obțineți (1) se intoarce Calc (99,99% * 1/2 - (30px - 30px * 1/2)) . Să rupem acest lucru:

Dimensiuni () este o listă de dimensiuni separate în spațiu. Acestea pot fi orice combinație a unei varietăți de dimensiuni: numere fixe sub formă de lungimi CSS valabile ( px. , ems. , Ondulație ); fracțiuni sau numere plutitoare (care returnează orice este rămase, numere fixe SANS); și auto Cuvinte cheie (care returnează orice dimensiune rămasă peste, fracțiunile Sans și numerele fixe)
() este un indice bazat pe 1 care aduce o dimensiune prietenoasă cu rețeaua de pe lista dvs. Asa de Dimensiuni (1px 2px 3px) Obțineți (2) ar reveni 2px.
Calc Formula este o dimensiune prietenoasă cu rețelele

Obținem lățimea pentru fiecare coloană într-o rețea cu două coloane cu un jgheab de 30px între ele:

.grilă {
  Afișaj: Flex;
  Flex-Wrap: Înfășurați;
}

.half {
  Lățime: Dimensiuni (1/2) Obțineți (1); / * returns calc (99.99% * 1/2 - (30px - 30px * 1/2)) * /
  Marja-dreapta: 30px; / * pune un jgheab în partea dreaptă a fiecărei coloane * /
}

.half: copilul (2N + 2) {/ * pornește la cel de-al doilea element și începe numărarea cu 2S * /
  Marginea-dreapta: 0; / * Îndepărtează ultimul jgheab de la fiecare rând * /
}

Acest lucru oferă deja designerilor puterea de a folosi aceste dimensiuni oriunde consideră că se potrivesc, dar să se aruncăm mai adânc.

Dimensiuni (100px 1/2) Obțineți (1) se intoarce 100px. . Destul de simplu, dar de ce ar trebui să folosim furnică pentru a reveni 100px. ? Vom ajunge la asta într-o secundă.

Dimensiuni (100px 1/2) Obțineți (2) se intoarce Calc (99.99% - (100px + (30px * 1))) * 1/2 - (30px - 30px * 1/2)) . Sfânta Crap. Ant se află dimensiunea totală a numerelor fixe și apoi revenirea 1/2. din ceea ce este lăsat peste - într-un mod nh prietenos cu rețele.

Putem folosi aceste lucruri Calc formule pentru a crea o rețea cu a 100px. Coloană și două 1/2. coloane ca Deci (voi omita .grilă stiluri pentru a salva copaci, dar asigurați-vă că le includeți în codul dvs.):

. Remediere {
  Lățime: Dimensiuni (100px 1/2) Obțineți (1); / * returnează 100px (știu că pare prost, dar poartă cu mine pentru un pic mai mult) * /
  Marja-dreapta: 30px;
}

.half {
  Lățime: Dimensiuni (100px 1/2) Obțineți (2); / * Returns Calc (99.99% - (100px + (30px * 1))) * 1/2 - (30px - 30px * 1/2)) * /
  Marja-dreapta: 30px;
}

.half: copilul nth (3n + 3) {
  Marginea-dreapta: 0;
}

Acum, putem obține câteva dimensiuni anterioare, dar nu sunt încă flexibile și pot necesita o mulțime de scris atunci când se ocupă de multe dimensiuni.

Preprocesor 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 — Markup minim: o marcare minimă, două coloane, grilă Nth folosind PostCss-Ant. Observați cum nu există nici o marjă de marjă pe ultimul element din rând

Preprocesoarele și postcsurile nu se înțeleg întotdeauna - mai ales când este implicată sintaxa personalizată. Din fericire, API-ul Ant este preprocesor prietenos. Putem folosi un parser poștal, cum ar fi PostCss-SCS cu un plugin de precizie, dar această abordare utilizează o mulțime de pluginuri postcs neterminate / nemulțumite, care nu este slabă a funcționalității SASS ". Am găsit cel mai bun flux de lucru este de a:

Utilizați un preprocesor rapid ca nodul-sass pentru a viziona in.scrs. la Out.Css.
Utilizați postcss pentru a viziona Out.Css. la Final.Css.
& Link & gt; la Final.Css. În marcajul tău

Acest lucru vă oferă cea mai bună sintaxă de preprocessor cu toate pluginurile de poștă electronică.

Acum, pentru lucrurile răcoritoare. Preprocesoarele au de obicei o modalitate de a bucura un anumit număr de ori, oferind un iterator:

 @ pentru $ i de la 1 la 3 {
  Conținut: $ I; // returnează conținutul: 1; Conținut: 2; Conținut: 3;
}

Cu o mică cunoaștere a preprocesoarelor, puteți începe să utilizați Ant în moduri cu adevărat interesante ...

 $ Dimensiuni: 100px 1/2 1/2;
$ jgheab: 30px;
$ lungime: lungime ($ dimensiuni);

.Column {
  Marginea-dreapta: $ jgheab;

  @ Pentru $ i de la 1 prin $ $ {
    & Amp;: Nth-copil (# {$ {$} n + # {$ i}) {
      Lățime: dimensiuni ($ dimensiuni) Obțineți ($ i) jgheab ($ jgheab);
    }
  }

  & Amp;: Nth-copil (# {$ lungime} n + # {$ lungime}) {
    Marginea-dreapta: 0;
  }
}

Acum, coloanele noastre de dimensiuni neregulate se înfășoară spre noi rânduri fără marcaj suplimentar. Du-te în jurul valorii de acest cod. Încercați diferite dimensiuni, jgheaburi și adăugarea de noi dimensiuni (cum ar fi 100px auto 100px).

Acesta este un model destul de comun cu Ant, așa că am înfășurat-o într-o proprietate care funcționează cu Vanilla CSS, de asemenea:

 .Grid {
  GRATUIT-GRID: Dimensiuni (100px 1/2 1/2); / * Puteți trece opțiuni suplimentare, dar Plech () nu mai este necesar. * /
}

O mulțime de opțiuni

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 Bucle: Ant într-adevăr începe să-și arate puterea atunci când îl combinăm cu bucle de preprocesor pentru a crea layout-uri care au fost imposibile

Grilele NTH sunt minunate atunci când cunoașteți dimensiunea și numărul de elemente care urmează să fie trecut, dar câteodată veți dori să creați un container și să faceți doar câteva elemente de dimensiuni ale aleatorilor. În aceste cazuri, Marja negativă Grilele sunt cel mai bun pariu. Pur și simplu treceți Marja negativă pentru a furniza așa:

.grilă {
  Marja: 0 -15px;
}

.Column {
  Lățime: Dimensiuni (1/3) Obțineți (1) grilă (marjă negativă);
  Marja: 0 15px;
}

Concluzie

Aceste exemple au fost doar o mică privire la toate lucrurile răcoroase Postcs-furny poate face. Are un câțiva parametri opționali și o mulțime de manipulare a erorilor descriptive, dar adevărata putere a lui Ant este tu.

Instrumentele "Dumb" care pur și simplu returnează un pic de date sunt întotdeauna cele mai bune instrumente, deoarece au pus puterea înapoi în mâinile dezvoltatorului. Aceasta este ceea ce a fost proiectat PostCss-Ant. Dacă sunteți intrigat, mergeți la corysimmons.github.io/postcss-ant. pentru unele demo-uri de topire a feței și docuri dulci.

Acest articol a fost publicat inițial în numărul 286 din revista netă, Cumpărați-l aici.

Articole similare:

De ce designul web are nevoie de experți UX
10 cărți de proiectare web de top pentru Crăciun 2016
3 instrumente de top pentru testarea performanței web

Construiți layout-uri complexe cu PostCss-Flexbox

Problema cu grilele

Introduceți dragonul.

Preprocesor Looping

O mulțime de opțiuni

Concluzie

să - Cele mai populare articole

Adobe Fresco Tutorial: Creați un portret în aplicația de pictură

Creați un efect de anagnef vechi de școală

Ilustrația hărții: un ghid pas cu pas

Cum de a desena o pisică

Designer de afinitate: Cum să utilizați constrângerile

Cum să pictați reflexii convingătoare

Cum să construim site-uri mai rapide

Cum se codifică un marker de realitate augmentat

Categorii