Flexbox - Ultimate CSS Flex tabela (s animiranim dijagramima!)

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.