Cjelovit vodič za Flexbox - CSS-trikovi

Pozadina

Modul Flexbox Layout(Fleksibilna kutija) (preporuka kandidata za W3C od listopada 2017.) ima za cilj pružiti učinkovitiji način rasporeda, poravnanja i raspodjele prostora između predmeta u spremniku, čak i kada je njihova veličina nepoznata i / ili dinamična (dakle, riječ "flex").

Glavna ideja koja stoji iza fleksibilnog izgleda jest dati spremniku mogućnost mijenjanja širine / visine (i redoslijeda) svojih predmeta kako bi najbolje ispunio raspoloživi prostor (uglavnom za prilagodbu svim vrstama uređaja za prikaz i veličinama zaslona). Savitljivi spremnik proširuje predmete kako bi ispunio slobodni prostor ili ih smanjuje kako bi se spriječilo prelijevanje.

Najvažnije je da je flexbox raspored usmjeren za razliku od uobičajenih izgleda (blok koji je vertikalno zasnovan i inline koji je vodoravno temeljen). Iako one dobro funkcioniraju za stranice, nedostaje im fleksibilnosti (nije namjeravana igra riječi) za podržavanje velikih ili složenih aplikacija (posebno kada je riječ o promjeni orijentacije, promjeni veličine, istezanju, skupljanju itd.).

Napomena: Flexbox izgled najprikladniji je za komponente aplikacije i male izglede, dok je raspored mreže namijenjen izgledu većih razmjera.

Osnove i terminologija

Budući da je flexbox čitav modul, a ne jedno svojstvo, on uključuje puno stvari, uključujući čitav niz svojstava. Neki od njih trebaju biti postavljeni na spremnik (nadređeni element, poznat kao "flex spremnik"), dok drugi trebaju biti postavljeni na djecu (navedeni "flex predmeti").

Ako se "redoviti" raspored temelji i na blokovskom i na linijskom smjeru protoka, fleksibilni raspored temelji se na "smjerovima fleks-protoka". Molimo pogledajte ovu sliku iz specifikacije, objašnjavajući glavnu ideju koja stoji iza flex izgleda.

Predmeti će se rasporediti slijedeći ili main axis(od main-startdo main-end) ili poprečnu os (od cross-startdo cross-end).

glavna os - Glavna os fleksibilnog spremnika primarna je os duž koje se postavljaju fleks elementi. Pazite, nije nužno vodoravno; to ovisi o flex-directionsvojstvu (vidi dolje).
glavni početak | glavni kraj - Fleks predmeti smještaju se u spremnik počevši od glavnog početka i idući do glavnog kraja.
glavna veličina - širina ili visina fleksibilnog predmeta, ovisno o tome koja je od glavnih dimenzija, glavna je veličina predmeta. Svojstvo glavne veličine flex jedinice je ili svojstvo 'width' ili 'height', ovisno o tome što je u glavnoj dimenziji.
poprečna os - os okomita na glavnu os naziva se poprečna os. Njegov smjer ovisi o smjeru glavne osi.
unakrsni start | poprečni kraj - Flex linije se ispunjavaju predmetima i stavljaju u spremnik počevši od poprečne strane savitljivog spremnika i idući prema poprečnoj strani.
poprečna veličina - širina ili visina savitljivog predmeta, ovisno o tome koja je dimenzija poprečnog presjeka, je poprečna veličina predmeta. Svojstvo križne veličine je ono što ima 'širinu' ili 'visinu' koja je u dimenziji križa.

Uzmi poster!

Puno se referirate na ovaj vodič? Kopiju prikvačite na zid ureda.

Kupi poster

Svojstva roditelja
(fleks spremnik)

prikaz

Ovo definira flex spremnik; ugrađen ili blokiran ovisno o zadanoj vrijednosti. Omogućuje fleksibilni kontekst za svu svoju izravnu djecu.

.container ( display: flex; /* or inline-flex */ )

Imajte na umu da CSS stupci nemaju utjecaja na flex spremnik.

fleks-smjer

Ovim se uspostavlja glavna os, definirajući tako smjer savijanja predmeta koji se postavljaju u spremnik za savijanje. Flexbox je (osim neobaveznog umotavanja) koncept rasporeda u jednom smjeru. Zamišljajte flex elemente kao primarno postavljanje bilo u vodoravne redove ili okomite stupce.

.container ( flex-direction: row | row-reverse | column | column-reverse; )

row(zadano): slijeva nadesno u ltr; zdesna nalijevo urtl
row-reverse: zdesna nalijevo u ltr; slijeva nadesno urtl
column: isto kao i od rowvrha do dna
column-reverse: isto kao i row-reverseodozdo prema gore

flex-wrap

Prema zadanim postavkama, svi flex elementi pokušavaju stati u jedan redak. To možete promijeniti i dopustiti da se predmeti po potrebi premotavaju ovim svojstvom.

.container ( flex-wrap: nowrap | wrap | wrap-reverse; )

nowrap (zadano): sve fleks stavke bit će u jednom retku
wrap: flex elementi premotavat će se u više redaka, od vrha do dna.
wrap-reverse: flex elementi premotavat će se na više linija odozdo prema gore.

Ovdje su neke vizualne demonstracije flex-wrap.

fleks-protok

To je skraćenica za flex-directioni flex-wrapsvojstava, koji zajedno definiraju Flex posude glavne i poprečne osi. Zadana vrijednost je row nowrap.

.container ( flex-flow: column wrap; )

opravdati-sadržaj

Ovo definira poravnanje duž glavne osi. Pomaže u distribuciji viška slobodnog prostora kada su ili svi fleksibilni predmeti na liniji nefleksibilni ili su fleksibilni, ali su dosegli maksimalnu veličinu. Također vrši određenu kontrolu nad poravnanjem stavki kada prelaze liniju.

.container ( justify-content: flex-start | flex-end | center | space-between | space-around | space-evenly | start | end | left | right… + safe | unsafe; )

flex-start (zadano): stavke su spakirane prema početku flex-smjera.
flex-end: predmeti su pakirani prema kraju flex-smjera.
start: predmeti su spakirani prema početku writing-modesmjera.
end: predmeti su pakirani prema kraju writing-modesmjera.
left: predmeti su pakirani prema lijevom rubu spremnika, osim ako to nema smisla flex-direction, tada se ponaša kao start.
right: predmeti su pakirani prema desnom rubu spremnika, osim ako to nema smisla flex-direction, tada se ponaša kao end.
center: stavke su centrirane duž crte
space-between: stavke su ravnomjerno raspoređene u retku; prva je stavka na početnom retku, zadnja stavka na krajnjem retku
space-around: stavke su ravnomjerno raspoređene u retku s jednakim prostorom oko sebe. Imajte na umu da razmaci vizualno nisu jednaki, jer svi predmeti imaju jednak prostor na obje strane. Prva stavka imat će jednu jedinicu prostora uz rub spremnika, ali dvije jedinice prostora između sljedeće stavke jer ta sljedeća stavka ima vlastiti razmak koji se primjenjuje.
space-evenly: stavke su raspoređene tako da razmak između bilo koje dvije stavke (i prostora do rubova) bude jednak.

Napominjemo da je podrška preglednika za ove vrijednosti iznijansirana. Na primjer, space-betweennikad nisam dobio podršku od nekih verzija Edgea, a početak / kraj / lijevo / desno još nisu u Chromeu. MDN ima detaljne grafikone. Najsigurniji vrijednosti flex-start, flex-endi center.

Postoje i dvije dodatne ključne riječi koje možete upariti s ovim vrijednostima: safei unsafe. Korištenje safeosigurava da, međutim, kako radite ovu vrstu pozicioniranja, ne možete gurnuti element tako da se prikazuje izvan zaslona (npr. Od vrha) na takav način da se i sadržaj ne može pomicati (što se naziva "gubitak podataka") .

poravnati-stavke

Ovo definira zadano ponašanje kako se flex elementi postavljaju duž poprečne osi na trenutnoj liniji. Zamislite to kao justify-contentverziju za poprečnu os (okomitu na glavnu os).

.container ( align-items: stretch | flex-start | flex-end | center | baseline | first baseline | last baseline | start | end | self-start | self-end +… safe | unsafe; )

stretch (zadano): rastezanje za punjenje spremnika (i dalje poštujte minimalnu širinu / maksimalnu širinu)
flex-start/ start/ self-start: predmeti se postavljaju na početak poprečne osi. Razlika između njih je suptilna i odnosi se na poštivanje flex-directionpravila ili writing-modepravila.
flex-end/ end/ self-end: predmeti se postavljaju na kraj poprečne osi. Razlika je opet suptilna i odnosi se na poštivanje flex-directionpravila u odnosu na writing-modepravila.
center: stavke su centrirane u poprečnoj osi
baseline: stavke su poravnane kao što su polazne crte poravnate

safeI unsafemodifikator ključne riječi mogu se koristiti u kombinaciji sa svim ostalim te ključne riječi (iako NAPOMENA preglednik), a bave pomoći da se spriječi poravnavanje elemenata takav da je sadržaj postane nedostupan.

poravnati-sadržaj

Ovim se poravnavaju linije fleksibilnog spremnika unutar mjesta u kojem postoji dodatni prostor na poprečnoj osi, slično načinu justify-contentporavnavanja pojedinih predmeta unutar glavne osi.

Napomena: Ovo svojstvo stupa na snagu samo u višerednim fleksibilnim spremnicima, gdje flex-flowje postavljeno na ili wrapili wrap-reverse). Jednostruki fleksibilni spremnik (tj. Gdje flex-flowje postavljena na zadanu vrijednost no-wrap) neće se odražavati align-content.

.container ( align-content: flex-start | flex-end | center | space-between | space-around | space-evenly | stretch | start | end | baseline | first baseline | last baseline +… safe | unsafe; )

normal (zadano): stavke se pakiraju u zadani položaj kao da nije postavljena vrijednost.
flex-start/ start: predmeti spakirani na početku spremnika. (Podržanije) flex-startpočasti flex-directiondok startčasti writing-modesmjer.
flex-end/ end: predmeti pakirani do kraja spremnika. (Više podrške) flex-endpoštuje, flex-directiondok kraj poštuje writing-modesmjer.
center: predmeti centrirani u spremniku
space-between: predmeti ravnomjerno raspoređeni; prvi redak je na početku spremnika, dok je posljednji na kraju
space-around: stavke ravnomjerno raspoređene s jednakim razmakom oko svake linije
space-evenly: predmeti su ravnomjerno raspoređeni s jednakim prostorom oko sebe
stretch: linije se protežu kako bi zauzele preostali prostor

Svojstva za djecu
(fleksibilni predmeti)

narudžba

Prema zadanim postavkama, flex stavke su poredane u izvornom redoslijedu. Međutim, ordersvojstvo kontrolira redoslijed kojim se pojavljuju u flex spremniku.

.item ( order: 5; /* default is 0 */ )

fleks-rasti

Ovo definira sposobnost fleksibilnog predmeta da raste ako je potrebno. Prihvaća jedinstvenu vrijednost koja služi kao omjer. Diktira količinu dostupnog prostora unutar fleks spremnika koji bi trebao zauzeti predmet.

Ako su svi predmeti flex-growpostavljeni na 1, preostali prostor u spremniku podijelit će se podjednako svoj djeci. Ako jedno od djece ima vrijednost 2, preostali prostor zauzimao bi dvostruko više prostora od ostalih (ili će barem pokušati).

.item ( flex-grow: 4; /* default 0 */ )

Negativni brojevi nisu valjani.

fleksibilno skupljanje

Ovo definira sposobnost savijanja predmeta ako je potrebno.

.item ( flex-shrink: 3; /* default 1 */ )

Negativni brojevi nisu valjani.

fleks-osnova

Ovo definira zadanu veličinu elementa prije raspodjele preostalog prostora. To može biti dužina (npr. 20%, 5rem, itd.) Ili ključna riječ. autoSredstvo za ključne riječi „pogled na moju širinu ili visinu imovine” (koja je privremeno obavlja main-sizeključnu riječ dok je obustavljeno). U contentsredstva za ključne riječi „Veličina je na temelju sadržaja stavke” - ova ključna riječ nije dobro još podržani, tako da je teško test i teže znati što njegove braće max-content, min-contenti fit-contentučiniti.

.item ( flex-basis: | auto; /* default auto */ )

Ako se postavi na 0, dodatni prostor oko sadržaja neće se uračunavati. Ako se postavi na auto, dodatni prostor raspoređuje se na temelju njegove flex-growvrijednosti. Pogledajte ovu grafiku.

savijati

Ovo je skraćenica za flex-grow, flex-shrinki flex-basiskombinirano. Drugi i treći parametar ( flex-shrinki flex-basis) nisu obavezni. Zadana je postavka 0 1 auto, ali ako je postavite s jednom brojevnom vrijednošću, to je kao 1 0.

.item ( flex: none | ( ? || ) )

Preporučuje se da koristite ovo stenografsko svojstvo, a ne da postavljate pojedinačna svojstva. Stenografija inteligentno postavlja ostale vrijednosti.

poravnati-se

To omogućuje nadjačavanje zadanog poravnanja (ili one koje je odredio align-items) za pojedine fleks stavke.

Pogledajte align-itemsobjašnjenje kako biste razumjeli dostupne vrijednosti.

.item ( align-self: auto | flex-start | flex-end | center | baseline | stretch; )

Imajte na umu da float, cleari vertical-alignnemaju učinka na flex stavke.

Primjeri

Počnimo s vrlo jednostavnim primjerom, rješavanjem gotovo svakodnevnog problema: savršeno centriranje. Ne može biti jednostavnije ako koristite flexbox.

.parent ( display: flex; height: 300px; /* Or whatever */ ) .child ( width: 100px; /* Or whatever */ height: 100px; /* Or whatever */ margin: auto; /* Magic! */ )

To se oslanja na činjenicu da margina postavljena autou fleksibilnom spremniku apsorbira dodatni prostor. Dakle, postavljanje okomite margine autoučinit će predmet savršeno centriranim u obje osi.

Sada ćemo upotrijebiti još neka svojstva. Razmotrite popis od 6 predmeta, svi s fiksnim dimenzijama, ali mogu se automatski prilagoditi. Želimo da budu ravnomjerno raspoređeni po vodoravnoj osi, tako da kada promijenimo veličinu preglednika, sve se lijepo skalira i bez medijskih upita.

.flex-container ( /* We first create a flex layout context */ display: flex; /* Then we define the flow direction and if we allow the items to wrap * Remember this is the same as: * flex-direction: row; * flex-wrap: wrap; */ flex-flow: row wrap; /* Then we define how is distributed the remaining space */ justify-content: space-around; )

Gotovo. Sve ostalo je samo neka briga za styling. Ispod je olovka s ovim primjerom. Svakako idite na CodePen i pokušajte promijeniti veličinu prozora kako biste vidjeli što se događa.

Pokušajmo nešto drugo. Zamislimo da imamo navigacijski element poravnan udesno na samom vrhu naše web stranice, ali želimo da on bude usredotočen na zaslone srednje veličine i na jednom uređaju na malim uređajima. Dovoljno lako.

/* Large */ .navigation ( display: flex; flex-flow: row wrap; /* This aligns items to the end line on main-axis */ justify-content: flex-end; ) /* Medium screens */ @media all and (max-width: 800px) ( .navigation ( /* When on medium sized screens, we center it by evenly distributing empty space around items */ justify-content: space-around; ) ) /* Small screens */ @media all and (max-width: 500px) ( .navigation ( /* On small screens, we are no longer using row direction but column */ flex-direction: column; ) )

Pokušajmo nešto još bolje igrajući se fleksibilnošću fleksibilnih predmeta! Što je s izgledom mobilnog uređaja s tri stupca s zaglavljem i podnožjem pune širine. I neovisno o redoslijedu izvora.

.wrapper ( display: flex; flex-flow: row wrap; ) /* We tell all items to be 100% width, via flex-basis */ .wrapper> * ( flex: 1 100%; ) /* We rely on source order for mobile-first approach * in this case: * 1. header * 2. article * 3. aside 1 * 4. aside 2 * 5. footer */ /* Medium screens */ @media all and (min-width: 600px) ( /* We tell both sidebars to share a row */ .aside ( flex: 1 auto; ) ) /* Large screens */ @media all and (min-width: 800px) ( /* We invert order of first sidebar and main * And tell the main element to take twice as much width as the other two sidebars */ .main ( flex: 2 0px; ) .aside-1 ( order: 1; ) .main ( order: 2; ) .aside-2 ( order: 3; ) .footer ( order: 4; ) )

Prefiks Flexbox

Flexbox zahtijeva neke prefikse dobavljača kako bi podržao većinu mogućih preglednika. Ne uključuje samo svojstva koja prethode prefiksu dobavljača, već zapravo postoje potpuno različita imena svojstava i vrijednosti. To je zato što su se specifikacije Flexboxa tijekom vremena mijenjale, stvarajući "staru", "tweener" i "novu" verziju.

Možda je najbolji način da se to riješi pisanjem nove (i konačne) sintakse i pokretanjem CSS-a kroz Autoprefixer, koji vrlo dobro rješava povratne informacije.

Kao alternativu, evo Sass-a koji @mixinće vam pomoći s nekim od prefiksa, koji vam također daje ideju o tome kakve stvari treba učiniti:

@mixin flexbox() ( display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: -webkit-flex; display: flex; ) @mixin flex($values) ( -webkit-box-flex: $values; -moz-box-flex: $values; -webkit-flex: $values; -ms-flex: $values; flex: $values; ) @mixin order($val) ( -webkit-box-ordinal-group: $val; -moz-box-ordinal-group: $val; -ms-flex-order: $val; -webkit-order: $val; order: $val; ) .wrapper ( @include flexbox(); ) .item ( @include flex(1 200px); @include order(2); )

Povezana svojstva

Cjelovit vodič za mrežu
Unosi almanaha o svojstvima mreže, poput grid-row / grid-column

Ostali izvori

Flexbox u CSS specifikacijama
Flexbox na MDN
Flexbox u Operi
Ronjenje u Flexbox od strane Bocoupa
Miješanje sintakse za najbolju podršku preglednika na CSS-trikovima
Flexbox, Raphael Goetter (FR)
Flexplorer Bennetta Feelyja

Bube

Flexbox sigurno nije bez svojih bugova. Najbolja kolekcija od njih koju sam vidio su Philip Walton i Flexbugs Grega Whitwortha. To je mjesto otvorenog koda za praćenje svih, pa mislim da je najbolje samo povezati do toga.

Podrška preglednika

Prekinuta "verzijom" flexboxa:

(novo) znači nedavnu sintaksu iz specifikacije (npr. display: flex;)
(tweener) znači neobičnu neslužbenu sintaksu iz 2011. (npr. display: flexbox;)
(stara) znači stara sintaksa iz 2009. (npr. display: box;)

Krom	Safari	Firefox	Opera	IE	Rub	Android	iOS
20- (stari) 21+ (novi)	3,1+ (staro) 6,1+ (novo)	2-21 (stari) 22+ (novi)	12,1+ (novo)	10 (tweener) 11+ (novo)	17+ (novo)	2,1+ (staro) 4,4+ (novo)	3,2+ (stari) 7,1+ (novi)

Preglednik Blackberry 10+ podržava novu sintaksu.