Sestavte komplexní uspořádání s PSPCSS-FlexBox

Feb 4, 2026

jak

FlexBox je skvělý nástroj pro snížení CSS Bloat, a má nějaký cukr zabudovaný, aby se vypořádal s věcmi, jako je zdrojový řád a zarovnání. Ale nenabízí žádnou pomoc pro matematiku, která vytváří sloupec a okapové velikosti. A co nejvíce odborníků opakovaně stav: FlexBox je pěkný, ale není to mřížkový systém.

Měli bychom použít FlexBox, ale neměli bychom vyhodit základní pojmy za mřížovými systémy, které nás vytáhly z "geocity éry" designu:

Aby sloupce poměrně
Používejte konzistentní žlaby po celém svém návrhu

Můžeme použít jeden z mnoha systémů FlexBox mřížky, ale ve všech poctivosti, styly za nimi jsou většinou stejné jako plovákové mřížky. Autoři prostě přidávají displej: ohnout do kontejneru, spolu s některými helperovými třídami, které obfuscate vlastnosti Flexbox (například třída jako .Grid-vertikální-align-střední je zmatka ALIGN-POLOŽKY: CENTER ).

Jediný rozdíl je, nyní sloupce jsou "ohnuté", což znamená, že dostaneme tento cukr, který jsem zmínil dříve. To však stále nevyřeší hlavní problémy, které mřížky čelí dnes: Systémy mřížky stále vystupují tunu CSS Bloatu a mřížky jsou stále nudné.

25 Šablony webových stránek top-třídy

Problém s mřížkami

System bloat: Bootstrap’s generated CSS for the grid alone is 16,435 characters – most of which you’ll never use — Systém Bloat: Bootstrap generované CSS pro mřížku je 16 435 znaků - většina z nichž nikdy nebudete používat

Autoři mřížky typicky distribuují obrovské balení CSS, které mohou posunout, zdroje objednávku, zarovnat a měnit velikost podle některých libovolných velikosti zařízení. Oni se spoléhají na gzip, aby zmírnili některé poškození, ale to to všechno nedostane. Co když nepotřebujete ty další funkce?

Za předpokladu, že rámec momentálně používáte, nabídne mřížky mřížky, nejlepší řešení může být naučit se ty a skládání vlastních sloupců. To produkuje malé bloat, ale omezuje vaše mřížky na frakce a nenabízí vám mnoho mobility mezi různými rámcemi.

Na druhý problém. Návrháři se stali mentálně uzamčeni, aby se všechna jejich rozhodnutí založila na určité kombinaci rovnoměrných sloupců. V důsledku toho se celý internet začíná rozostřit společně do "zásobníku na mobilu; 1/12 kombinace sloupců na cokoliv jiném dystopii.

FlexBox představil ohýbající se , který nás trochu osvobodil. Nyní můžeme nastavit velikosti, které vypadají dobře a vyplňte zbývající prostor s protáhlého prvku, ale žlaby se scházejí v celé stránce? Jsou obsahové oblasti vyložené s jakýmkoliv poměrem v mysli, nebo jsme zpátky jen okřídlené?

Zadejte Dragon.

Řešení obou těchto problémů je zabaleno do funkce zvanoucí postcss-mravenec. Postcss pluginy mohou být použity s řadou nástrojů sestavení, jako je WebPack, doušek nebo jednoduše příkazového řádku. mravenci bezproblémově míchá do prostých css (nebo jakéhokoliv preprocesor) s klamně jednoduchým API, které masky desítky mysli-boggling vypočítaný vzorce. Vyžaduje dva parametry podobné mixinem, které přináší mnoho velikostí přátelských mřížek.

Příklad může učinit toto jasnější: šířka: Velikosti (1/2) dostanete (1) návrat Calc (99,99% * 1/2 - (30px - 30px * 1/2)) . Pojďme to rozbít:

Velikosti () je prostorově oddělený seznam velikostí. Mohou to být jakákoliv kombinace různých velikostí: pevná čísla ve formě platných délek CSS ( px. , Em. , % ); Frakce nebo plovákové čísla (které vrací cokoliv je zbylo, sans pevná čísla); a auto Klíčová slova (která vrací jakoukoliv velikost je ponechána, Sans Frakce a pevná čísla)
trhat() je 1-založený index, který načítá velikost s rozlišením s mřížkou z vašeho seznamu. Tak Velikosti (1px 2px 3px) GET (2) vrátit se 2PX.
. \ T vypočítaný Vzorec je velikost přátelská síla

Dostáváme šířku pro každý sloupec ve dvou sloupcové mřížce s jedním 30px žlabu mezi nimi:

.Grid {
  Displej: Flex;
  Flex-Wrap: Wrap;
}

.polovina {
  Šířka: Velikosti (1/2) dostanete (1); / * Vrácení CAP (99,99% * 1/2 - (30PX - 30PX * 1/2)) * /
  Právo okraje: 30px; / * Vloží žlab na pravé straně každého sloupce * /
}

.half: ntt-dítě (2n + 2) {/ * začíná na 2. prvku a začne počítat o 2S * /
  Pargin-vpravo: 0; / * Odstraní poslední okap z každého řádku * /
}

Toto již dává návrhářům moc používat tyto velikosti kdekoli, kde vidí, ale pojďme ponořit hlouběji.

Velikosti (100px 1/2) Získejte (1) návrat 100fx. . Jednoduchý, ale proč bychom museli použít mravenec k návratu 100fx. ? Dostaneme se k tomu za sekundu.

Velikosti (100px 1/2) GET (2) návrat Calc (99,99% - (100px + (30px * 1)) * 1/2 - (30px - 30px * 1/2)) . Sakra. mravenec zjistí celkovou velikost pevných čísel a pak se vracejí 1/2. z toho, co je ponecháno přes - v Nth síti přátelské cestě.

Můžeme tyto vypočítaný vzorce pro vytvoření mřížky s 100fx. sloupec a dva 1/2. sloupce jako tak (budu vynechat .mřížka Styly ušetřit stromy, ale nezapomeňte je zahrnout do kódu):

. \ TFixed-velikost {
  Šířka: Velikosti (100px 1/2) dostanete (1); / * vrací 100px (vím, že to vypadá hloupé, ale nést se mnou o něco déle) * /
  Právo okraje: 30px;
}

.polovina {
  Šířka: Velikosti (100px 1/2) Získejte (2); / * Returns Calc ((99,99% - (100px + (30px * 1)) * 1/2 - (30PX - 30px * 1/2) * /
  Právo okraje: 30px;
}

.half: ntt-dítě (3n + 3) {
  Pargin-vpravo: 0;
}

Nyní můžeme získat nějaké dříve nedonaxovatelné velikosti, ale ještě to není super-flexibilní a může vyžadovat spoustu psaní při jednání s mnoha velikostí.

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 — Minimální značka: minimální značka, dva-sloupec, ntt mřížka pomocí postcss-mravence. Všimněte si, jak na posledním prvku v řádku není žádná okraje

Předprocesory a postcss se vždy nedostávají - zejména když se jedná o vlastní syntaxi. Mravenec API je naštěstí předprocesorem. Můžeme použít postcss-analyzátor jako postcss-scss s pluginem precsss, ale tento přístup používá spoustu nedokončených / neomezených PostCSS pluginů, které špatně napodobená funkce Sass '. Zjistil jsem, že nejlepší workflow je:

Použijte rychlý předprocesor jako uzel-sass in.scsss. na Out.css.
Použijte Postcss na sledování Out.css. na final.css.
& lt; link & gt; na final.css. ve vašem markupu

To vám dává to nejlepší z předprocesorové syntaxe se všemi PSCSS plugins vaše srdce touhy.

Teď pro skvělé věci. Předprocesory mají typicky způsob, jak smyčit zadaný počet časů při poskytování iterátoru:

 @for $ i od 1 do 3 {
  Obsah: $ i; // Vrácení obsahu: 1; Obsah: 2; Obsah: 3;
}

S trochou znalostí předprocesorů, můžete začít používat mravenec opravdu zajímavým způsobem ...

 $ Velikosti: 100px 1/2 1/2;
$ Butter: 30px;
$ Délka: délka ($ velikosti);

.column {
  Pargin-vpravo: $ okap;

  @for $ i od 1 až $ délka {
    & amp;: ntt-dítě (# {$ délka} n + # {$ i}) {
      Šířka: Velikosti ($ velikosti) Získejte ($ I) Gutter ($ Gutter);
    }
  }

  & amp;: ntt-dítě (# {$ délka} n + # {$ délka}) {
    Pargin-vpravo: 0;
  }
}

Nyní naše nepravidelně velikosti sloupců zabalí do nových řádků bez dalšího značení. Jděte do tohoto kódu. Vyzkoušejte různé velikosti, okapy a přidávání nových velikostí (jako 100px Auto 100PX).

Jedná se o docela společný vzor s mravencem, takže jsem ho zabalil do nemovitosti, která pracuje s vanilkovými CSS stejně:

 .Grid {
  Generovat-Grid: Velikosti (100px 1/2 1/2); / * Můžete předat další možnosti, ale pluck () již není potřeba. * /
}

Spousta možností

Preprocessor loops: ant really begins to show its strength when we combine it with preprocessor loops to create layouts that used to be impossible — Předprocesorové smyčky: mravenec opravdu začíná ukázat svou sílu, když je kombinujeme s předprocesorovými smyčkami, aby vytvořily rozložení, které byly nemožné

Nth mřížky jsou skvělé, když znáte velikost a počet prvků, které mají být předány, ale někdy budete chtít vytvořit kontejner a jen vyhodit některé náhodně velké prvky. V těchto případech, negativní-marže Mřížky jsou vaše nejlepší sázka. Jednoduše projít negativní-marže mravenec jako tak:

.Grid {
  marže: 0 -15px;
}

.column {
  Šířka: velikosti (1/3) dostanete (1) mřížku (negativní marže);
  marže: 0 15px;
}

Závěr

Tyto příklady byly jen malý záblesk na všech chladných věcí Postcss-Ant může udělat. Má pár volitelnějších parametrů a spoustu popisných manipulace s chybou, ale pravá síla mravence je vy.

'Dumb' nástroje, které jednoduše vrátí trochu dat, jsou vždy nejlepšími nástroji, protože dali moc zpět do developerových rukou. To je to, co postcsss-mravenec byl navržen tak, aby to udělal. Pokud jste zaujatí, hlavu corysimmons.github.io/postcss-ant. Pro některé tváře-tání dema a sladké dokumenty.

Tento článek byl původně publikován v čísle 286 Čistého časopisu, Kupte si to tady.

Související články:

Proč web design potřebuje UX experty
10 Top web design knihy pro Vánoce 2016
3 Horní nástroje pro testování webového výkonu

Sestavte komplexní uspořádání s PSPCSS-FlexBox

Problém s mřížkami

Zadejte Dragon.

Preprocesor Looping.

Spousta možností

Závěr

jak - Nejoblíbenější články

Začněte s Gravem CMS

Jak nakreslit paže

Jak navrhnout tvary CSS: Úvod

Zlepšete své koncepce umění dovednosti ve Photoshopu

Jak malovat přesvědčivé odrazy

Sestavte si kartu UI s nadací

Udělejte animovaný gif ve Photoshopu

Jak poskytnout fotorealistickou oblohu

Kategorie