Ovaj sveobuhvatni CSS flexbox cheatsheet će pokriti sve što trebate znati da biste počeli koristiti flexbox u svojim web projektima.
CSS flexbox izgled omogućuje vam jednostavno formatiranje HTML-a. Flexbox olakšava poravnavanje predmeta vertikalno i vodoravno pomoću redaka i stupaca. Predmeti će se "saviti" u različite veličine kako bi popunili prostor. Olakšava responzivni dizajn.
CSS flexbox izvrstan je za upotrebu za opći izgled vašeg web mjesta ili aplikacije. Jednostavno je naučiti, podržan je u svim modernim preglednicima, a ne treba toliko vremena da shvatite osnove. Na kraju ovog vodiča bit ćete spremni početi koristiti flexbox u svojim web projektima.
Članak uključuje korisne animirane gifove Scotta Domesa koji će flexbox učiniti još lakšim za razumijevanje i vizualizaciju.
Sva svojstva CSS Flexboxa
Evo popisa svih svojstava CSS flexbox-a koja se mogu koristiti za pozicioniranje elemenata u CSS-u. Dalje ćete vidjeti kako rade.
CSS koji se može primijeniti na spremnik
display: flexbox | inline-flex; flex-direction: row | row-reverse | column | column-reverse; flex-wrap: nowrap | wrap | wrap-reverse; flex-flow: || justify-content: flex-start | flex-end | center | space-between | space-around; align-items: flex-start | flex-end | center | baseline | stretch; align-content: flex-start | flex-end | center | space-between | space-around | stretch;CSS koji se može primijeniti na stavke / elemente u spremniku
order: ; flex-grow: ; /* default 0 */ flex-shrink: ; /* default 1 */ flex-basis: | auto; /* default auto */ flex: none | [ ? || ] align-self: auto | flex-start | flex-end | center | baseline | stretch;Terminologija
Prije nego što naučite što rade svojstva flexbox, važno je razumjeti povezanu terminologiju. Ovdje su definicije ključnih pojmova flexbox preuzete iz službene W3C specifikacije za flexbox.
- glavna os : Glavna os fleksibilnog spremnika primarna je os duž koje se postavljaju fleks elementi. Smjer se temelji na svojstvu flex-direction.
- glavni početak | glavni kraj :Predmeti za savijanje smještaju se u spremnik, počevši sa strane s glavnim startom i prema glavnoj strani.
- glavna veličina : Širina ili visina flex spremnika ili flex predmeta, ovisno o tome koja je od glavnih dimenzija, glavna je veličina te kutije. Njegova glavna karakteristika veličine je, dakle, svojstvo širine ili visine, ovisno o tome koja je od glavnih dimenzija.
- 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.
CSS Flex zaslon
display: flex is kaže vašem pregledniku, "Molim vas, želim upotrijebiti flexbox s ovim spremnikom."
Zadani je divelement display:block. Element s ovom postavkom zaslona zauzima punu širinu crte na kojoj se nalazi. Evo primjera četiri div-a u boji u nadređenom div-u sa zadanom postavkom prikaza:
Da biste upotrijebili flexbox u odjeljku svoje stranice, prvo pretvorite nadređeni spremnik u flex spremnik dodavanjem display: flex;u CSS nadređenog spremnika.
Ovo će inicijalizirati ovaj spremnik kao flex spremnik i primijeniti neka zadana flex svojstva.
Flex smjer
flex-directionomogućuje vam kontrolu nad prikazom predmeta u spremniku. Želite li ih slijeva udesno, zdesna ulijevo, odozgo prema dolje ili odozdo prema gore? Sve to možete učiniti jednostavno podešavanjem flex-directionspremnika.
Zadani raspored nakon prijave display: flexje da se predmeti raspoređuju duž glavne osi slijeva udesno. Animacija u nastavku pokazuje što se događa kada flex-direction: columnse doda elementu spremnika.
Također možete postaviti flex-directionna row-reversei column-reverse.
Opravdajte sadržaj
justify-contentsvojstvo je poravnavanja predmeta u spremniku duž glavne osi (vidi gornji terminološki dijagram). To se mijenja ovisno o načinu prikazivanja sadržaja. Omogućuje nam da ispunimo bilo koji prazan prostor u redovima i definiramo kako ga želimo "opravdati".
Ovdje su naši najčešći opcije koriste kako bi opravdali sadržaja: flex-start | flex-end | center | space-between | space-around.
Evo kako izgledaju različite opcije:
space-betweendistribuira stavke tako da je prva stavka u ravni s početkom, a zadnja u ravni s krajem. space-aroundje slično, ali predmeti imaju prostor veličine upola manji na oba kraja.
Flex Align Predmeti
align-itemsomogućuje nam poravnavanje predmeta duž križne osi (vidi gornji terminološki dijagram). To omogućuje pozicioniranje sadržaja na mnogo različitih načina koristeći opravdavanje sadržaja i poravnavanje stavki.
Ovdje su najčešće opcije korištene za poravnavanje stavki: flex-start | flex-end | center | baseline | stretch
Da stretchbi funkcionirali onako kako biste očekivali, visina elemenata mora biti postavljena na autoumjesto određene visine.
Ova animacija pokazuje kako izgledaju opcije:
Sad ćemo upotrijebiti oboje justify-contenti align-items. To će pokazati razliku između glavnih osi i poprečnih osi.
Poravnajte sebe
align-self omogućuje podešavanje poravnanja pojedinog elementa.
Ima ista svojstva align-items.
U sljedećoj animaciji nadređeni div ima CSS align-items: centeri flex-direction: row. Prva dva kvadrata kruže kroz različite align-selfvrijednosti.
Flex Wrap
Flexbox će prema zadanim postavkama pokušati uklopiti sve elemente u jedan red. Međutim, to možete promijeniti sa flex-wrapposjedom. Tri su vrijednosti pomoću kojih možete odrediti kada elementi idu u drugi redak.
Zadana vrijednost je flex-wrap: nowrap. To će uzrokovati da sve ostane u jednom redu slijeva udesno.
flex-wrap: wrap omogućit će iskakanje stavki u sljedeći redak ako u prvom redu nema dovoljno mjesta. Stavke će se prikazivati slijeva udesno.
flex-wrap: wrap-reverse također omogućuje skok stavki u sljedeći redak, ali ovaj put se stavke prikazuju zdesna nalijevo.
Flex Flow
flex-flowkombinira upotrebu flex-wrapi flex-directionu jedno svojstvo. Koristi se tako da se prvo postavi smjer, a zatim omota. Evo primjera:flex-flow: column wrap;
Poravnajte sadržaj
align-contentkoristi se za poravnavanje predmeta s više redaka. Služi za poravnanje na poprečnoj osi i neće imati utjecaja na sadržaj koji je jedan redak.
Evo opcija: align-content: flex-start | flex-end | center | space-between | space-around | stretch;
Okomito centriranje s Flexboxom
Ako želite vertikalno centrirati sav sadržaj unutar nadređenog elementa, upotrijebite align-items. Evo koda za upotrebu:
.parent { display: flex; align-items: center; }Igre i aplikacije
Ako želite vježbati upotrebu flexboxa, isprobajte ove igre i aplikacije koje će vam pomoći da savladate flexbox.
- Flexbox Defense je web igra u kojoj učite flexbox dok pokušavate spriječiti dolazeće neprijatelje da prođu vašu obranu.
- Flexbox Froggy je igra u kojoj pomažete Froggyju i prijateljima pisanjem CSS koda.
- Flexyboxes is an app that allows you to see code samples and change parameters to see how Flexbox works visually.
- Flexbox Patters is a website that shows off a bunch of Flexbox examples.
Conclusion
We've covered all the most common CSS flexbox properties. The next step is practice! Try making a few projects using flexbox so you can get used to how it works.