Kā darbojas Flexbox - paskaidrots ar lieliem, krāsainiem, animētiem gifiem

Flexbox sola mūs glābt no vienkāršā CSS ļaunuma (piemēram, vertikālās izlīdzināšanas).

Nu, Flexbox patiešām sasniedz šo mērķi. Bet apgūt jauno garīgo modeli var būt grūti.

Tātad animēti apskatīsim, kā darbojas Flexbox, lai mēs to varētu izmantot, lai izveidotu labākus izkārtojumus.

Flexbox pamatprincips ir padarīt izkārtojumus elastīgus un intuitīvus.

Lai to paveiktu, tas ļauj konteineriem pašiem izlemt, kā vienmērīgi sadalīt savus bērnus - ieskaitot viņu izmēru un atstarpi starp viņiem.

Tas viss principā izklausās labi. Bet redzēsim, kā tas izskatās praksē.

Šajā rakstā mēs analizēsim 5 visizplatītākās Flexbox īpašības. Mēs izpētīsim, ko viņi dara, kā jūs varat tos izmantot un kādi būs viņu rezultāti.

Īpašums # 1: Displejs: Flex

Šeit ir mūsu tīmekļa vietnes piemērs:

Jums ir četri dažāda izmēra krāsaini divi, kas atrodas pelēkā konteinera divā. No šī brīža katrs divs ir noklusējis display: block. Tādējādi katrs kvadrāts aizņem visu līnijas platumu.

Lai sāktu darbu ar Flexbox, konteiners jāpārveido par elastīgu konteineru . Tas ir tikpat viegli kā:

#container { display: flex;}

Nav daudz kas mainījies - jūsu divi tagad tiek rādīti vienā rindā, bet tas arī viss. Bet aizkulisēs jūs esat paveicis kaut ko spēcīgu. Jūs saviem laukumiem iedevāt kaut ko tādu, ko sauc par elastīgu kontekstu .

Tagad jūs varat sākt tos pozicionēt šajā kontekstā ar daudz mazākām grūtībām nekā tradicionālā CSS.

Īpašums Nr. 2: elastīgs virziens

Flexbox konteineram ir divas asis: galvenā ass un šķērsass , kas pēc noklusējuma izskatās šādi:

Pēc noklusējuma vienumi tiek sakārtoti pa galveno asi no kreisās uz labo . Tāpēc pēc kvadrātu iestatīšanas pēc noklusējuma horizontālā līnija tika iestatīta pēc noklusējuma display: flex.

Flex-directiontomēr pieņemsim, ka jūs pagriezīsit galveno asi.

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

Šeit ir jāveic būtiska atšķirība: flex-direction: columnnelīdzina šķērsvirziena ass kvadrātus galvenās ass vietā. Tas liek pašai galvenajai asij virzīties no horizontālas uz vertikālu.

Ir arī dažas citas iespējas elastīgajam virzienam: rinda atpakaļ un kolonna atpakaļ.

3. rekvizīts: pamatojiet saturu

Satura pamatojums pamato vienumu izlīdzināšanu uz galvenās ass.

Šeit jūs iegremdēsities nedaudz dziļāk galvenās / šķērsas ass atšķirībā. Vispirms atgriezīsimies pie elastības virziena: rindas.

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

Jūsu rīcībā ir piecas komandas, lai izmantotu justify-content :

  1. Elastīgs sākums
  2. Elastīgs gals
  3. Centrs
  4. Atstarpes starp
  5. Kosmosa apkārt

Vieta apkārt un atstarpe ir vismazāk intuitīvi. Starp atstarpi tiek nodrošināta vienāda telpa starp katru kvadrātu, bet ne starp to un konteineru.

Atstarpe apkārt novieto vienādu laukuma spilvenu abās laukuma pusēs - tas nozīmē, ka atstarpe starp ārējiem laukumiem un konteineru ir uz pusi mazāka nekā atstarpe starp diviem kvadrātiem (katrs kvadrāts nodrošina vienādu rezerves daudzumu, kas nepārklājas, tādējādi dubultojot vietu).

Pēdējā piezīme: atcerieties, ka pamatotais saturs darbojas gar galveno asi , un elastības virziens pārslēdz galveno asi . Tas būs svarīgi, pārejot uz…

Īpašums Nr. 4: izlīdziniet vienumus

Ja jūs saņemat justify-content, izlīdzināšanas vienumi būs brīze.

Tā kā satura pamatojums darbojas gar galveno asi, izlīdzināšanas vienumi attiecas uz šķērssiju.

Atiestatīsim mūsu elastības virzienu uz rindu, tāpēc mūsu asis izskatās tāpat kā iepriekš redzamais attēls.

Tad ienirsim komandās align-items.

  1. elastīgs sākums
  2. elastīgs gals
  3. centrā
  4. stiept
  5. bāzes līniju

Pirmie trīs ir tieši tādi paši kā satura attaisnošana , tāpēc šeit nekas pārāk izdomāts.

Nākamie divi tomēr ir nedaudz atšķirīgi.

Jums ir stiepšanās, kurā vienumi aizņem visu šķērsass un bāzes līniju, kurā rindkopas tagu apakšdaļa ir izlīdzināta.

(Ņemiet vērā, ka align-items: stretchman kvadrātu augstums bija jāiestata kā automātisks. Pretējā gadījumā īpašums augstums pārspētu posmu.)

Attiecībā uz bāzes līniju ņemiet vērā, ka, noņemot rindkopu tagus, tā vietā izlīdzina kvadrātu apakšdaļu, piemēram:

Lai labāk parādītu galveno un šķērsvirziena asi, apvienosim pamatojuma un izlīdzināšanas vienumus un redzēsim, kā centrēšana darbojas atšķirīgi abām elastīgā virziena komandām:

Ar rindu kvadrāti tiek uzstādīti pa horizontālu galveno asi. Ar kolonnu tie nokrīt pa vertikālo galveno asi.

Pat ja abos gadījumos kvadrāti ir centrēti gan vertikāli, gan horizontāli, abi nav savstarpēji aizvietojami!

Īpašums Nr. 5: Pielāgot sevi

Align-self ļauj manuāli manipulēt ar viena konkrēta elementa izlīdzināšanu.

Tas būtībā ir svarīgāks par viena laukuma izlīdzināšanas elementiem . Visas īpašības ir vienādas, lai gan pēc noklusējuma tā ir automātiska , kurā tā seko konteinera izlīdzināšanas elementiem .

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

Apskatīsim, kā tas izskatās. Jūs pieteikties līdzināšanas Self diviem laukumiem, un par pārējo pieteikties align-items: centerun flex-direction: row.

Secinājums

Lai gan mēs tikko esam saskrāpējuši Flexbox virsmu, šīm komandām vajadzētu būt pietiekamām, lai jūs varētu rīkoties ar lielāko daļu izlīdzinājumu un vertikāli pielāgot savu sirds saturu.

Ja vēlaties redzēt vairāk GIF Flexbox apmācības vai ja šī apmācība jums bija noderīga, nospiediet zemāk esošo zaļo sirdi vai atstājiet komentāru.

Paldies, ka lasījāt!