Kuidas Flexbox töötab - selgitatud suurte, värviliste, animeeritud gifidega

Flexbox lubab meid päästa tavalise CSS-i pahandustest (nagu vertikaalne joondamine).

Noh, Flexbox täidab selle eesmärgi. Kuid selle uue vaimse mudeli valdamine võib olla keeruline.

Nii et vaatame animeeritud pilgu Flexboxi toimimisele, et saaksime seda kasutada paremate kujunduste loomiseks.

Flexboxi põhimõte on muuta paigutused paindlikuks ja intuitiivseks.

Selle saavutamiseks võimaldab see konteineritel ise otsustada, kuidas oma lapsi ühtlaselt jaotada - sealhulgas nende suurus ja nende vaheline ruum.

See kõik kõlab põhimõtteliselt hästi. Kuid vaatame, kuidas see praktikas välja näeb.

Selles artiklis uurime 5 kõige tavalisemat Flexboxi omadust. Uurime, mida nad teevad, kuidas saate neid kasutada ja kuidas nende tulemused tegelikult välja näevad.

1. omadus: ekraan: painduv

Siin on meie veebisaidi näide:

Teil on neli erineva suurusega värvilist diiva, mis asuvad hallis konteinerdivis. Praeguse seisuga on iga div vaikimisi seadnud display: block. Iga ruut võtab seega kogu joone laiuse.

Flexboxiga alustamiseks peate oma konteineri muutma paindlikuks mahutiks . See on sama lihtne kui:

#container { display: flex;}

Palju pole muutunud - teie divid kuvatakse praegu tekstisiseselt, kuid see on ka kõik. Kuid kulisside taga olete teinud midagi võimsat. Andsite oma ruutudele midagi, mida nimetatakse paindlikuks kontekstiks .

Nüüd saate hakata neid selles kontekstis positsioneerima palju vähem raskustega kui traditsiooniline CSS.

Kinnisvara nr 2: paindlik suund

FlexBox konteiner on kaks suunda: peatelje ja rist telje , mis vaikimisi niimoodi välja:

Vaikimisi on üksused paigutatud piki põhitelge vasakult paremale . Seetõttu on teie ruutude rakendamisel vaikimisi horisontaaljoon display: flex.

Flex-directionlaseme aga pöörata peatelge.

#container { display: flex; flex-direction: column;}

Siinkohal tuleb teha oluline erinevus: flex-direction: columnei joondata põhitelje asemel ristteljel olevaid ruute. See paneb põhitelje ise minema horisontaalsest vertikaalseks.

Paindesuuna jaoks on veel paar võimalust: rida tagasi ja veerg tagasi.

Atribuut nr 3: sisu põhjendamine

Põhjendus-sisu juhib, kuidas üksusi põhiteljel joondada .

Siin sukeldute veidi sügavamale põhi- / risttelje vahet. Kõigepealt pöördume tagasi painde suuna juurde: rida.

#container { display: flex; flex-direction: row; justify-content: flex-start;}

Teil on õigustussisu kasutamiseks viis käsku :

  1. Flex-start
  2. Painduv ots
  3. Keskus
  4. Tühik
  5. Ruumi ümber

Ruumi ümber ja tühiku vahel on kõige vähem intuitiivne. Tühik annab võrdse ruumi iga ruudu vahel, kuid mitte selle ja anuma vahel.

Ruumi ümber asetab ruudu mõlemale küljele võrdse ruumipadja - see tähendab, et välimiste ruutude ja konteineri vaheline ruum on poole väiksem kui kahe ruudu vaheline ruum (iga ruut annab kattuva võrdse koguse varu, seega kahekordistades ruumi).

Viimane märkus: pidage meeles, et õigustussisu töötab piki põhitelge ja paindesuunaline lülitab põhitelge . See on oluline, kui kolite…

Atribuut nr 4: joondage üksused

Kui saate õigustatud sisu, on joonduselemendid imelihtne.

Kuna õigustatud sisu töötab põhiteljel, kehtivad joonduselemendid ristteljel.

Lähtestame painde suuna reale, nii et meie teljed näevad välja nagu ülaltoodud pilt.

Seejärel sukeldume align-items käskudesse.

  1. flex-start
  2. painduv ots
  3. Keskus
  4. venitada
  5. lähtejoon

Esimesed kolm on täpselt samad, mis õigusta sisu , nii et siin pole midagi liiga uhket.

Kaks järgmist on siiski veidi erinevad.

Teil on venitus, milles elemendid võtavad kogu risttelje ja baasjoone, milles lõikekoodide alumine osa on joondatud.

(Pange tähele, et selleks align-items: stretchpidin ruutude kõrguse seadistama automaatseks. Vastasel juhul alistaks kõrguse omadus venituse.)

Baasjoone puhul pidage meeles, et kui võtate ära lõigumärgendid, joondab see ruutude alumise osa, näiteks:

Põhi- ja risttelje paremaks demonstreerimiseks kombineerime õigustava sisu ja joonduselemendid ning vaatame, kuidas kahe paindekäskluse puhul tsentreerimine toimib erinevalt:

Ridadega seatakse ruudud piki horisontaalset peatelge. Kolonniga langevad nad piki vertikaalset peatelge.

Isegi kui ruudud on mõlemal juhul tsentreeritud nii vertikaalselt kui ka horisontaalselt, pole need kaks omavahel asendatavad!

Vara nr 5: joondage ise

Align-self võimaldab teil ühe konkreetse elemendi joondamist käsitsi manipuleerida.

Põhimõtteliselt on see ülimuslik ühe ruudu joonduselemendid . Kõik omadused on samad, kuigi see vaikimisi auto , milles ta järgib align-esemed mahuti.

#container { align-items: flex-start;}
.square#one { align-self: center;}// Only this square will be centered.

Vaatame, kuidas see välja näeb. Rakendate joondamise ise kahele ruudule ja ülejäänud rakendage align-items: centerja flex-direction: row.

Järeldus

Ehkki me oleme just Flexboxi pinda kriimustanud, peaksid need käsud olema piisavad, et saaksite hakkama enamiku põhiliste joondustega - ja joonduksite vertikaalselt oma südamega.

Kui soovite näha rohkem GIF Flexboxi õpetusi või kui sellest õpetusest oli teile abi, vajutage allolevat rohelist südant või jätke kommentaar.

Täname lugemast!