Rakenna monimutkaisia asetteluja postcss-flexboxilla

Feb 4, 2026

Miten tehdään

Flexbox on erinomainen työkalu CSS: n vähentämiseen, ja sillä on joitain sokeria, joka on rakennettu käsittelemään asioita, kuten lähdejärjestys ja kohdistus. Mutta se ei tarjoa mitään apua matematiikan tekemiseen, joka luo saraketta ja vesikokoja. Kuten monet asiantuntijat toistuvasti toistuvasti: Flexbox on mukava, mutta se ei ole verkkojärjestelmä.

Meidän on käytettävä Flexboxia, mutta emme saa heittää pois peruskäsitteitä GRID-järjestelmien takana, jotka vetivät meidät GeoCities ERA: sta:

Tee sarakkeet verrannollinen johonkin
Käytä johdonmukaisia putkia koko suunnittelun aikana

Voimme käyttää yhtä monista Flexbox Grid -järjestelmistä siellä, mutta kaikessa rehellisyydessä, niiden takana olevat tyylejä ovat lähinnä samat kuin float-pohjaiset verkot. Tekijät vain lisäävät näytön: Flex astiaan sekä joitakin auttaja-luokkia, jotka hämärtävät Flexboxin ominaisuudet (esimerkiksi luokka kuten .grid-vertikaalinen suuntaus on hämmentynyt Kohdista: Keskus ).

Ainoa ero on, nyt sarakkeet ovat "taipuisia", mikä tarkoittaa, että saamme tämän sokerin, jonka mainitsin aiemmin. Mutta tämä ei vieläkään ratkaise tärkeimpiä ongelmia, jotka kohtaavat tänään: Grid Systems tuottavat edelleen tonni CSS Bloat, ja ruudut ovat edelleen tylsää.

25 Top-luokan verkkosivustoa

Ongelma ruudukkojen kanssa

System bloat: Bootstrap’s generated CSS for the grid alone is 16,435 characters – most of which you’ll never use — Järjestelmä Bloat: Bootstrap: n luoneet CSS: n verkkoon pelkästään on 16,435 merkkiä - joista suurin osa ei koskaan käytä

Grid-kirjoittajat jakelevat tyypillisesti valtavia CSS-pakkauksia, jotka voivat korvata, lähdekoodin, kohdistaa ja muuttaa koko mielivaltaisen laitteen koon mukaan. He luottavat Gzipiin lieventämään joitain vahinkoja, mutta tämä ei saa sitä kaikki. Entä jos et tarvitse näitä lisäominaisuuksia?

Olettaen, että käytät parhaita tarjouksia, joita käytät verkkoyksiköitä, paras ratkaisu saattaa olla oppia niitä ja säveltää omia sarakkeitasi. Tämä tuottaa vähän pullistua, mutta rajoittaa verkkoja fraktioihin ja ei tarjoa paljon liikkuvuutta eri puitteiden välillä.

Toiseen kysymykseen. Suunnittelijat ovat henkisesti lukittuja tekemään kaikki päätöksensä tiettyyn yhdistelmään yhtä suurten sarakkeiden yhdistelmälle. Tämän seurauksena koko internet alkaa hämärtää yhteen "pino mobiililaitteeseen; 1/12 sarakkeen yhdistelmät mihin tahansa muuhun dystopiaan.

Flexbox esitteli flex-kasvaa , joka vapautti meidät hieman. Nyt voimme asettaa koot, jotka näyttävät hyvältä ja täyttävät jäljellä olevat tilat venytetyllä elementillä, mutta tee gutters linjaa johdonmukaisesti koko sivun? Ovatko sisältöalueet millä tahansa millä tahansa mittasuhteilla, vai tulemme takaisin vain siivekäs?

Anna lohikäärme

Ratkaisu molempiin ongelmiin on kääritty PostCSS-Ant-toimintoon. Postcss-laajennuksia voidaan käyttää useilla rakennustyökaluilla, kuten webpack, gulp tai yksinkertaisesti komentorivi. ant-sekoitukset saumattomasti tavallisiin CSS: hen (tai esikäsittelyyn), jossa on petollinen yksinkertainen API, joka peittää kymmeniä mielen boggling kalkki kaavat. Se vaatii kaksi sekoitusmaisempaa parametria haetaan lukuisia ruudukkoystävällisiä koot.

Esimerkki voi tehdä tämän selkeämmän: leveys: Koot (1/2) Hanki (1) palaa Calc (99,99% * 1/2 - (30px - 30px * 1/2)) . Katkaise tämä alas:

Koot () on tilaa erotettu koko kokolista. Nämä voivat olla mikä tahansa yhdistelmä erilaisia kokoja: kiinteät numerot kelvollisten CSS-pituuksien muodossa ( px , em , % ); fraktiot tai float-numerot (jotka palauttavat mitä tahansa jäljellä, sanat kiinteät numerot); ja auto Avainsanat (joka palauttaa mikä tahansa koko on jäljellä, sans fraktiot ja kiinteät numerot)
Pluck () on 1-pohjainen indeksi, joka hakee ruudukkoystävällisen koon luettelostasi. Niin Koot (1px 2px 3px) Hanki (2) palaa 2px
The kalkki Kaava on ruudukkoystävällinen koko

Saan leveys kullekin sarakkeelle kahden sarakkeen verkkoon, jossa on yksi 30px-kouru niiden välillä:

.grid {
  Näyttö: Flex;
  Flex-Wrap: Kääri;
}

.Half {
  Leveys: Koot (1/2) Hanki (1); / * Palauttaa laskettuna (99,99% * 1/2 - (30px - 30px * 1/2)) * /
  marginaali-oikeus: 30px; / * Asettaa kappaleen kunkin sarakkeen oikealla puolella * /
}

.Half: nth-lapsi (2n + 2) {/ * alkaa 2. elementistä ja alkaa laskea 2S * /
  marginaali-oikea: 0; / * poistaa viimeisen kourun jokaisesta rivistä * /
}

Tämä antaa jo suunnittelijoille mahdollisuuden käyttää näitä kokoja aina, kun he näkevät sopiviksi, mutta sukellamme syvemmälle.

Koot (100px 1/2) Hanki (1) palaa 100px . Tarpeeksi yksinkertainen, mutta miksi meidän on käytettävä ant-paluuta 100px ? Me pääsemme siihen toiseen.

Koot (100px 1/2) Hanki (2) palaa Calc (99,99% - (100px + (30px * 1)) * 1/2 - (30px - 30px * 1/2))) . Pyhä jysäys. Ant on selvittää kiinteän numeron kokonaiskoko ja palaa sitten 1/2 Mitä tahansa jäljellä - n: n remidiyhteisöllä.

Voimme käyttää näitä kalkki kaavat luodaan verkkoon 100px Sarake ja kaksi 1/2 sarakkeet, kuten niin (minä jätän .grid Tyylit säästävät puita, mutta muista sisällyttää ne koodisi):

 .fixed-koko {
  Leveys: Koot (100px 1/2) Hanki (1); / * Palauttaa 100px (tiedän, että se tuntuu typerältä, mutta karhu minua hieman pidempään) * /
  marginaali-oikeus: 30px;
}

.Half {
  Leveys: Koot (100px 1/2) Hanki (2); / * Palauttaa laskettuna ((99,99% - (100px + (30px + (30px * 1))) * 1/2 - (30px - 30px * 1/2)) * /
  marginaali-oikeus: 30px;
}

.Half: nth-lapsi (3n + 3) {
  marginaali-oikea: 0;
}

Nyt voimme saada joitain aikaisempia sopivia kokoja, mutta se ei ole erittäin joustava vielä ja voi vaatia paljon kirjoitusta monien koon käsittelyssä.

ESPOCESSOR 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 — Minimaalinen merkintä: minimaalinen merkintä, kaksipylväs, NTH GRID käyttäen postcss-ant. Huomaa, miten viimeisellä elementillä ei ole marginaalia

Preprocessors ja postekset eivät aina tule mukaan - varsinkin kun mukautettu syntaksi on mukana. Onneksi Ant's API on esikäsittelyystävällinen. Voimme käyttää postcss-parseria, kuten PostCSS-SCS: ää, jossa on PropSS-laajennus, mutta tämä lähestymistapa käyttää paljon keskeneräisiä / hankalia postcss-laajennuksia, jotka huonosti jäljittelevät Sassin toiminnallisuutta. Olen löytänyt parhaan työnkulun on:

Käytä nopeaa esikäsittelyä, kuten solmu-Sassia katsella inssioissa jllek out.csss
Käytä postcss katsella out.csss jllek final.css
& lt; linkki & gt; jllek final.css Markupissa

Tämä antaa sinulle parhaan preprocessorin syntaksi kaikki postcss laajentaa sydämesi toiveita.

Nyt viileitä tavaroita. Esikäsittelijöillä on tyypillisesti tapa silmukata määritettyä määrää kertoja, kun se tarjoaa iteratorin:

 @For $ I alkaen 1 - 3 {
  Sisältö: $ I; // palauttaa sisällön: 1; Sisältö: 2; Sisältö: 3;
}

Little-tiedostoa esikäsittelijöistä, voit aloittaa Ant Todella mielenkiintoisissa tavoista ...

 $ Koot: 100px 1/2 1/2;
$ Gutter: 30px;
$ Pituus: pituus ($ Koot);

.column {
  marginaali-oikeus: $ Gutter;

  @For $ I alkaen 1 - $ pituus {
    & amp;: nth-child (# {$ pituus} n + # {$ i}) {
      Leveys: Koot ($ koko) Get ($ I) Gutter ($ Gutter);
    }
  }

  & amp;: nth-child (# {$ pituus} n + # {$ pituus}) {
    marginaali-oikea: 0;
  }
}

Nyt sääntöjenmukaisesti kokoiset sarakkeet käärit uusiin riviin ilman lisämerkkiä. Mene eteenpäin ja tinker noin tämän koodin kanssa. Kokeile vaihtelevia koot, vesiskoot ja lisäämällä uusia kokoja (kuten 100px auto 100px).

Tämä on melko yleinen kuvio ANT: n kanssa, joten olen kääritty se kiinteistöön, joka toimii vanilja CSS: n kanssa:

 .grid {
  Generate-Grid: Koot (100px 1/2 1/2); / * Voit siirtää lisävaihtoehtoja, mutta pluck () ei enää tarvita. * /
}

Paljon vaihtoehtoja

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-silmukat: Ant todella alkaa näyttää voimansa, kun yhdistämme sen esikäsittelylaitteilla, jotta voit luoda ulkoasuja, jotka olivat mahdotonta

N: n verkot ovat suuria, kun tiedät siirrettävien elementtien koon ja määrän, mutta joskus haluat luoda säiliön ja vain kaataa joitakin satunnaisesti kokoisia elementtejä. Näissä tapauksissa, Negative-marginaali Verrat ovat paras veto. Yksinkertaisesti kulkea Negative-marginaali muille kuin niin:

.grid {
  marginaali: 0 -15px;
}

.column {
  Leveys: Koot (1/3) Hanki (1) verkko (negatiivinen marginaali);
  Marginaali: 0 15px;
}

Johtopäätös

Nämä esimerkit olivat vain pieniä vilkkuu kaikissa viileissä asioissa postcss-ant voi tehdä. Siinä on pari valinnaista parametria ja paljon kuvaavaa virheenkäsittelyä, mutta Ant on todellinen voima.

"Dumb" -työkalut, jotka yksinkertaisesti palauttavat vähän tietoja ovat aina parhaita työkaluja, kun ne asettavat virran takaisin kehittäjän käsiin. Näin postcss-ant on suunniteltu tekemään. Jos olet kiinnostunut, pää corysimmons.github.io/postcsss Jotkut kasvojen sulava demot ja makeat dokumentit.

Tämä artikkeli julkaistiin alun perin nettolehdestä 286, Osta se täällä.

Aiheeseen liittyvät artikkelit:

Miksi Web Design tarvitsee UX-asiantuntijoita
10 Top Web Design -kirjat jouluna 2016
3 Top Tools Web-suorituskyvyn testaamiseen

Rakenna monimutkaisia asetteluja postcss-flexboxilla

Ongelma ruudukkojen kanssa

Anna lohikäärme

ESPOCESSOR LOOPING

Paljon vaihtoehtoja

Johtopäätös

Miten tehdään - Suosituimmat artikkelit

Miten Photoshop joku kuvaan

Portrait Photography: Täydellinen muotokuva

Mikä on terminaattoriviiva?

Kuinka tehdä oman luonteen Raamatun

Kuinka tehdä massiivisia räjähdyksiä V-ray

Piirrä koiran lyijykynän muotokuva

Kuinka välittää äänen maalauksessa

Nopeuttaa 3D-mallinnuksen

Luokat

Rakenna monimutkaisia ​​asetteluja postcss-flexboxilla

Ongelma ruudukkojen kanssa

Anna lohikäärme

ESPOCESSOR LOOPING

Paljon vaihtoehtoja

Johtopäätös

Miten tehdään - Suosituimmat artikkelit

Luokat

Rakenna monimutkaisia asetteluja postcss-flexboxilla