Komplex elrendezések készítése Postcss-Flexbox

Sep 16, 2025

kézikönyv

A FLEXBOX egy nagyszerű eszköz a CSS Bloat csökkentéséhez, és van néhány cukor beépített, hogy foglalkozzon olyan dolgokkal, mint a forrásrendelés és az igazítás. De ez nem kínál semmilyen segítséget az oszlop és az ereszcsatorna méretét létrehozó matematikához. Amennyire több szakértő ismételten: Flexbox szép, de ez nem egy rácsrendszer.

Flexboxot kell használnunk, de nem szabad eldobni a rácsrendszerek mögött lévő alapfogalmakat, amelyek kihúztak minket a tervezés "Geocities korszakából":

Oszlopok arányosak valamit
Használjon konzisztens csatornákat a tervezés során

Használhatjuk az egyik flexbox rácsrendszer egyikét, de minden becsületességben a mögöttes stílusok többnyire ugyanazok, mint az úszó alapú rácsok. A szerzők csak adjanak hozzá a kijelzőn: FLEX a tartályhoz, valamint néhány segítő osztály, amely obsuscate flexbox tulajdonságokat (például egy olyan osztályt szeretne .Grid-függőleges-align-mid egy obsuscation Align-tételek: Központ ).

Az egyetlen különbség az, hogy az oszlopok "hajlítottak", ami azt jelenti, hogy megkapjuk a korábban említett cukrot. De ez még mindig nem oldja meg a legfontosabb problémákat, amelyek ma a rácsok szembesülnek: a rácsrendszerek továbbra is egy csomó CSS Bloat, és a rácsok még mindig unalmasak.

25 felső osztályú weboldal sablonok

A rácsokkal kapcsolatos probléma

System bloat: Bootstrap’s generated CSS for the grid alone is 16,435 characters – most of which you’ll never use — System Bloat: A bootstrap generált CSS a rács számára egyedül 16,435 karakter, amelyek közül a legtöbbet soha nem fogja használni

A rácsszerzők tipikusan hatalmas csomagokat terjesztenek, amelyek az önkényes eszköz méretének megfelelően ellensúlyozhatják, forrásrendet, átméretezhetnek és átméretezhetnek. A Gzipre támaszkodnak, hogy enyhítsék néhány kárt, de ez nem kap mindent. Mi van, ha nincs szükség azokra az extra funkciókra?

Feltételezve, hogy az Ön által jelenleg használt keretet a Rács Mixins-ot használja, a legjobb megoldás lehet tanulni azokat és összeállíthatja saját oszlopait. Ez kis duzzadást eredményez, de korlátozza a rácsokat a frakciókhoz, és nem kínál sok mobilitást a különböző keretek között.

A második kérdésre. A tervezők mentálisan lezártak, hogy minden döntésüket egyformán méretű oszlopok bizonyos kombinációján alapuljanak. Ennek eredményeképpen az egész internet kezd villogni együtt egy "Stack-re a mobilon; 1/12 oszlop kombinációk bármi más dystopia.

A flexbox bevezette flex-növekedés , amely egy kicsit felszabadított minket. Most meg tudjuk állítani a méreteket, amelyek jól néznek ki, és kitölthetjük a fennmaradó helyet egy nyújtott elemgel, de a csatornák összhangban vannak az egész oldalon? Olyan tartalmi területek, amelyek bármilyen arányban vannak, szem előtt tartva, vagy visszajöttünk, hogy csak szárnyadjon?

A sárkány közbelép

Mindkét probléma megoldása a Postcss-hangya nevű függvényben van csomagolva. Postcss pluginok használhatók olyan építési eszközökkel, mint például a Webpack, Gulp vagy egyszerűen a parancssor. A hangya zökkenőmentesen keveredik a sima CSS-t (vagy bármely előfeldolgozó) egy megtévesztő egyszerű API-val, amely több tucatnyi elme-bogglinget maszkol számított Formulák. Két mixinszerű paramétert igényel, hogy a rácsbarát méretek bővítését hozzák létre.

Példa lehet arra, hogy ez a világosabb: szélesség: Méretek (1/2) Get (1) visszatér Calc (99,99% * 1/2 - (30px - 30px * 1/2))) . Törjünk le ezt:

Méretek () a méret-elválasztott méretek listája. Ezek különböző méretű kombináció lehet: fix számok érvényes CSS hossza ( px , emelvény , % ); frakciók vagy úszó számok (amelyek visszaküldnek a maradékot, a sans fix számokat); és autó kulcsszavak (amelyek visszaadják a méretet, a sans frakciók és a fix számok)
bátorság() egy 1-alapú index, amely egy rácsos méretű méretet kap a listából. Így Méretek (1PX 2PX 3PX) Get (2) visszaadná 2px
A számított A képlet rácsbarát méretű

Minden oszlop szélességét két oszlopos rácsban kapjuk, egyetlen 30px csatornával közöttük:

.grid {
  Kijelző: FLEX;
  Flex-Wrap: Wrap;
}

.fél {
  Szélesség: méretek (1/2) Get (1); / * Visszatérés Calc (99,99% * 1/2 - (30px - 30px * 1/2) * /
  Margó-jobb: 30px; / * A csatornát az egyes oszlopok jobb oldalára helyezi * /
}

.Half: nth-child (2n + 2) {/ * a 2. elemen kezdődik, és 2s * /
  Margó jobb: 0; / * eltávolítja az utolsó csatornát minden sorból * /
}

Ez már megadja a tervezőknek a hatalmat, hogy ezeket a méreteket bárhol láthassák, de merüljünk mélyebben.

Méretek (100px 1/2) Get (1) visszatér 100px . Elég egyszerű, de miért kellene visszaadnunk a hangyát 100px ? Egy másodperc múlva eljutunk.

Méretek (100px 1/2) Get (2) visszatér Calc ((99,99% - (100px + (30px * 1))) * 1/2 - (30px - 30px * 1/2)))) . Szent szar. A hangya meghatározza a rögzített számok teljes méretét, majd visszatér 1/2 bármi is maradt - egy nth rácsbarát módon.

Ezeket használhatjuk számított képletek egy rács létrehozásához a 100px oszlop és kettő 1/2 Olyan oszlopok, mint például (elhagyom a .rács Stílusok a fák mentésére, de győződjön meg róla, hogy tartalmazza őket a kódodban):

. Fixed méret {
  Szélesség: Méretek (100px 1/2) Get (1); / * $ 100px-t ad vissza (tudom, hogy buta, de egy kicsit hosszabb ideig viseli velem) * /
  Margó-jobb: 30px;
}

.fél {
  Szélesség: Méretek (100px 1/2) Get (2); / * Visszatérés Calc (99,99% - (100px + (30px + (30px * 1))) * 1/2 - (30px - 30px * 1/2)) * /
  Margó-jobb: 30px;
}

.Half: nth-child (3n + 3) {
  Margó jobb: 0;
}

Most kaphatunk néhány korábban kivághatatlan méretet, de ez még nem szuper rugalmas, és sokféle írást igényelhet, ha sok méretben foglalkozik.

Előfeldolgozó hurok

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 — Minimális jelölés: minimális jelölés, két oszlop, NTH rács a posztcsok-hangyával. FIGYELMEZTETÉS Hogyan nincs margó - jobb a sor utolsó elemén

Az előprocesszorok és a posztcsok nem mindig jutnak el - különösen, ha az egyéni szintaxis részt vesz. Szerencsére az Ant API előfeldolgozó-barát. Használhatunk egy Postcss-Parser-t, mint a Postcss-SCS-eket, amelynek PRECSS PRIPIN, de ez a megközelítés sok befejezetlen / pontatlanított posztcs-pluginokat használ, amelyek rosszul mimic Sass funkcionalitás. Megtaláltam a legjobb munkafolyamatot:

Használjon olyan gyors előfeldolgozót, mint a csomópont-sasz in.scss nak nek out.css
Használja a Postcss-t nézni out.css nak nek utolsó.csok
& ln; link & gt; nak nek utolsó.csok A jelölésben

Ez adja meg a legjobb előfeldolgozó szintaxisát az összes posztcss plugins-szal, amit a szívedet vágyik.

Most a hűvös dolgokra. Az előprocesszorok jellemzően rendelkeznek egy meghatározott számú alkalommal, miközben iterátort biztosítanak:

 @for $ 1-től 3-ig {
  Tartalom: $ I; // visszaadása tartalom: 1; Tartalom: 2; Tartalom: 3;
}

Egy kis ismeretekkel az előfeldolgozók, akkor megkezdheti az Ant igazán érdekes módon ...

 $ Méretek: 100px 1/2 1/2;
$ csatorna: 30px;
$ Hossz: hossza ($ méret);

.olnum {
  Margó-jobb: $ csatorna;

  @for $ 1-ről $ 1-ig {
    & amp;: nth-child (# {$ Hossz} n + # {$ i}) {
      Szélesség: Méretek ($ méret) Get ($ i) csatorna ($ csatorna);
    }
  }

  & amp;: nth-child (# {$ Hossz} n + # {$ Hossz}) {
    Margó jobb: 0;
  }
}

Most a szabálytalanul méretű oszlopunk új sorokba csomagolva további jelölés nélkül. Menj előre, és vigyázzon ezzel a kóddal. Próbáljon változó méreteket, csatornákat, és új méreteket adjon hozzá (például 100px auto 100px).

Ez egy elég gyakori minta az Ant-szal, így egy olyan ingatlanba csomagoltam, amely a Vanilla CSS-vel is működik:

 .Grid {
  GRAND GRAND: Méretek (100px 1/2 1/2); / * További opciókat adhat meg, de a Pluck () már nem szükséges. * /
}

Sok lehetőség

Preprocessor loops: ant really begins to show its strength when we combine it with preprocessor loops to create layouts that used to be impossible — Előfeldolgozó hurkok: Ant igazán megmutatja erejét, amikor az előfeldolgozó hurkokkal kombináljuk, hogy olyan elrendezéseket hozzunk létre, amelyek lehetetlenek voltak

Az NTH rácsok nagyszerűek, ha ismeri az elhunyt elemek méretét és számát, de néha egy tartályt szeretne létrehozni, és csak véletlenszerűen méretű elemeket kell kidolgoznia. Ezekben az esetekben, negatív-margó A rácsok a legjobb tét. Egyszerűen át negatív-margó Annyira:

.grid {
  Margó: 0 -15px;
}

.olnum {
  Szélesség: Méretek (1/3) Get (1) rács (negatív margó);
  Margó: 0 15px;
}

Következtetés

Ezek a példák csak egy apró pillantásra voltak az összes hűvös dologban, amit a Postcss-Ant tehet. Pár több opcionális paraméterrel és sok leíró hibaelhárítással rendelkezik, de az Ant igazi hatalma.

„Dumb” eszközöket, amelyek egyszerűen vissza kicsit az adatok mindig a legjobb eszközöket, mint tette a hatalom vissza a fejlesztő kezébe. Ez az, amit a posztcsok-hangyát terveztek. Ha érdekes, menjen el corysimmons.github.io/postcss- néhány arc-olvadó demó és édes docs.

Ezt a cikket eredetileg a Net Magazine 286. számában tették közzé, Vásárolja meg itt.

Kapcsolódó cikkek:

Miért van szüksége az UX szakértőkre
10 legjobb webdesign könyvek karácsonyra 2016
3 Legfelső szerszámok a webes teljesítmény teszteléséhez

Komplex elrendezések készítése Postcss-Flexbox

A rácsokkal kapcsolatos probléma

A sárkány közbelép

Előfeldolgozó hurok

Sok lehetőség

Következtetés

kézikönyv - Most Popular Articles

Hogyan kell felhívni a nyakát és vállát

Portréfotózás: Hogyan készítsünk tökéletes portrékat

Gyors reaktív blog létrehozása Svelte és Sapper

Használja a WordPress fej nélküli CMS-t

Fájlok letöltése 3D világ 232

Hogyan mozoghat a Daz Studio és a Zbrush között

Hogyan készítsünk hatalmas robbanásokat V-Ray-vel

Lenyűgöző tiltó textúrák létrehozása Blenderben

Kategóriák