Sve o svojstvima flexboxa

Koncept koji stoji iza svojstava Flexbox-a je pružiti mogućnost spremniku da automatski mijenja širinu, visinu i redoslijed svojih predmeta kako bi najbolje ispunio raspoloživi prostor. Ovo može biti korisno za smještaj predmeta unutar različitih veličina zaslona i uređaja. Stavke se proširuju kako bi popunile bilo koji slobodni prostor ili se smanjuju kako bi se izbjeglo prelijevanje.

CSS rešetka Flexbox za početnike

CSS je jedna od prvih i najlakših stvari za naučiti u web razvoju i dizajnu, ali nemojte pogrešiti njenu jednostavnost zbog nedostatka funkcija. Ima nekoliko nevjerojatnih značajki i mogućnosti spremnih za korištenje, a jedna od njih je relativno nov modul izgleda: Svojstva Flexboxa.

Svojstva Flexbox-a jedan su od novijih izgleda dostupnih CSS3-u i o njemu se može puno naučiti. Evo, upoznajemo se s izgledom i načinom njegovog korištenja. Prije nego što počnemo, evo nekoliko pozadina o svojstvima Flexboxa:

Što su načini izgleda?

Najjednostavnije rečeno, CSS Flexbox rešetka je način izgleda. CSS ima nekoliko postojećih načina izgleda. Način izgleda bloka (poput zaslona: blok) već dugo je prisutan. Izgled blokova dobar je izbor za oblikovanje cjelovitih dokumenata. U stvari, web-preglednik prema zadanim postavkama tretira nekoliko elemenata poput div-a i odlomaka kao razinu bloka.

Još jedan uobičajeni način izgleda je linijski. Snažna oznaka, ulazna oznaka i oznaka sidra primjeri su elemenata na razini. Alati za razvojne programere preglednika Google Chrome čak omogućuju pregled elementa „stil računanja“ za određivanje CSS svojstava i vrijednosti koje su primijenjene na elemente koje programer nije izričito postavio.

Relativno noviji Flexbox svojstva (Fleksibilna kutija) dizajnirana su kao učinkovitija metoda postavljanja, poravnavanja i raspodjele prostora među spremničkim predmetima, čak i ako je veličina tih predmeta dinamična ili nepoznata. Otuda i izraz „fleksibilan“.

Koncept Flexbox Properties

Najvažnija stvar u svojstvima Flexbox-a je da je ona u smjeru. Dok je raspored blokova temeljen na vertikalnom, a unutarnji izgled temeljen na vodoravnom položaju, Flexbox nije niti jedan. Blok i inline rade dobro u pravim situacijama, ali im nedostaje fleksibilnost da podrže složene ili velike aplikacije, posebno kada je riječ o promjeni orijentacije, istezanju, smanjivanju, promjeni veličine i na drugi način mijenjanju dimenzija elemenata.

Gdje se koriste svojstva Flexboxa?

Kao i svaki drugi CSS izgled, Flexbox se najbolje koristi u određenim situacijama. Konkretno, prikladno je za male razmjere i komponente aplikacije. Za izgled većih razmjera, mudriji bi bio izgled Grid izgleda.

Zašto se preferira Flexbox?

Mnogo programera i dizajnera daje prednost svojstvima Flexbox-a kad god mogu (ponekad prečesto!). To je zato što se svojstva Flexbox-a lakše koriste; pozicioniranje elemenata je mnogo jednostavnije, tako da možete dobiti složenije rasporede s manje kodiranja. Drugim riječima, proces razvoja pojednostavljuje.

Vodič za svojstva Flexboxa

Sada kada znate malo o svojstvima Flexboxa i kako i zašto radi, evo detaljnog vodiča za izgled. Model izgleda sastoji se od nadređenog spremnika, koji se naziva i "fleksibilni spremnik". Neposredna djeca iz ovog spremnika nazivaju se "fleksibilni predmeti".

Izgled je prošao kroz nekoliko iteracija i promjena sintakse tijekom godina od kada je prvi nacrt stvoren 2009. Najnovija specifikacija Flexbox podržana je u sljedećim web preglednicima:

  • Opera 17+
  • Internet Explorer 11+
  • Mozilla Firefox 28+
  • Google Chrome 29+
  • Apple Safari 6.1+
  • Android 4.4 ili noviji
  • iOS 7.1+

Terminologija koja se koristi u svojstvima Flexboxa

Evo pogleda neke osnovne terminologije koja se koristi u izgledu svojstava Flexbox:

  • Zaslon: Ova se naredba koristi za definiranje flex spremnika. Može biti inline ili blok, ovisno o točki. Također definira fleksibilni sadržaj za sve stavke u spremniku. Primjer:

.container (

prikaz: fleksibilnost; / * ili inline-flex * /

)

  • Redoslijed: Flex predmeti postavljeni su prema izvornom redoslijedu, ali svojstvo 'order' može kontrolirati redoslijed u kojem se predmeti pojavljuju u spremniku. Primjer:

.item (

narudžba: ;

)

  • Smjer fleksije: Ovaj redoslijed postavlja glavnu os, definirajući smjer u kojem se savitljivi predmeti nalaze unutar spremnika. Flex predmeti mogu se postaviti uglavnom u okomitom ili vodoravnom smjeru. Primjer:

.container (

fleks-smjer: red | red-reverse | stupac | stupac-obrnuti;

)

  • Povećavanje fleksibilnosti: Ovaj nalog definira sposobnost fleksibilnog predmeta da se automatski poveća ako ima prostora. Može prihvatiti vrijednost bez jedinice koja služi kao omjer. Ova vrijednost diktira koliko prostora predmet treba zauzeti unutar fleksibilnog spremnika. Na primjer, ako su svi predmeti postavljeni na 1, ostatak prostora u spremniku bit će ravnomjerno raspoređen svu djecu. Ako je vrijednost 2, preostali prostor zauzet će dva puta više prostora od ostatka. Primjer:

.item (

fleksirati-rasti:; / * zadano 0 * /

)

  • Flex-shrink: To čini potpuno suprotno kao fleks raste, jer smanjuje fleksibilne predmete kada je potrebno. Primjer:

.item (

fleks-skupljanje:; / * zadano 1 * /

)

  • Flex-osnova: Ovaj poredak definira zadanu veličinu elemenata prije raspodjele ostatka prostora. To može biti duljina, poput 5rem ili 20%, ili ključna riječ. Ključna riječ "automatski" označava da se mjeri širina i visina stavke, a ključna riječ "sadržaj" označava da je stavka veličina objekta na temelju njenog sadržaja. Primjer:

.item (

fleksibilna osnova: | auto; / * zadani automatski * /

)

  • Savijanje: Ovo je kombinirana skraćenica za sva gore navedena tri svojstva: fleksibilni rast, fleksibilni rast i fleksibilni skupljanje. Zadani je "0 1 auto".

.item (

fleks: nema | (||)

)

  • Sadržaj opravdanja: ovaj redoslijed definira poravnavanje glavne osi i pomaže u raspodjeli dodatnog slobodnog prostora ako je preostalo kad su stavke nefleksibilne ili su dosegle svoju maksimalnu veličinu. Ovo također pomaže u kontroli poravnanja stavke kada postoji preljev.

.container (

opravdati-sadržaj: flex-start | savitljivi kraj | središte | razmak između | prostor oko;

)

  • Poravnaj stavke: koristi se za definiranje zadanog ponašanja izgleda fleksibilnih stavki na poprečnoj osi tekuće crte. To je u osnovi inačica „opravdanog sadržaja“ na poprečnoj osi, okomitoj na glavnu os. Primjer:

.container (

predmeti poravnanja: flex-start | fleks-kraj | središte | osnovna linija | protežu;

)

  • Sadržaj poravnanja : Ovaj poredak poravnava linije spremnika u slučaju da na poprečnoj osi ima dodatnog prostora. Sličan je 'opravdavajućem sadržaju', ali za poprečnu os umjesto glavne osi. Ako postoji samo jedan niz fleksibilnih predmeta, to svojstvo nema nikakvog učinka. Primjer:

.container (

poravnaj-sadržaj: flex-start | fleks-kraj | središte | razmak između | prostor oko | protežu;

)

Korištenje svojstava Flexboxa

Da biste koristili izgled Flexboxa, jednostavno možete postaviti svojstvo prikaza na HTML nadređeni element, kao što je dolje:

.flex-container (

prikaz: -webkit-flex; / * Safari * /

prikaz: fleksibilnost;

)

Ako se više želite prikazati kao inline element, možete upisati:

.flex-container (

prikaz: -webkit-inline-flex; / * Safari * /

zaslon: inline-flex;

)

Ovo svojstvo vam je potrebno samo za postavljanje nadređenog fleksibilnog spremnika i njegovih neposrednih fleksibilnih predmeta. Djeca iz spremnika automatski će postati fleksibilni predmeti.

Preporučeni tečajevi

  • Online tečaj o besplatnom jQueryju
  • Online tečaj o slobodnom kutnom JS
  • Online trening na Mudboxu
  • Trening za certificiranje u Free Ruby

Svojstva Flexbox-Svojstva fleksibilnih spremnika

Postoji puno načina grupiranja svojstava Flexboxa, a najlakši način da saznate o njima je dijeljenjem ih u svojstva Flex spremnika i predmeta. Gore smo opisali neka svojstva fleksibilnih spremnika. Pogledajmo ostalo:

  • Smjer flexa: redak ili stupac

Svojstvo fleksibilnog smjera može se postaviti kao stupovi vertikalno ili redovi vodoravno. S pravcem retka, fleksni predmeti prema zadanom su složeni lijevo-desno. Obrtanje retka mijenja ovaj smjer desno-lijevo. Smjer stupca prema zadanom je od vrha do dna, a funkcija preokreta stupca preokreće ga u smjer odozdo prema gore.

  • Flex-wrap: sada zamotajte ili omotajte

Svojstvo flex-wrap kontrolira ako su djeca fleksibilnog spremnika raspoređena u više ili jednostrukih linija i smjer u kojem su nove linije složene. Vrijednost sadržanja vidi fleksibilne stavke prikazane u jednom retku, prema zadanom smanjene da odgovaraju širini spremnika. Vrijednost preokreta vidi fleksibilne stavke prikazane u različitim redovima u smjeru slijeva udesno ili odozgo prema dolje. Možete dodati preokret obrnuto da biste promijenili i redoslijed. Zadana vrijednost je sadarap.

  • Flex-tok

Ovo svojstvo je u osnovi skraćenje da se zajedno postave svojstva smjera savijanja i savijanja. Zadana vrijednost je 'row nowrap'. Primjer:

.flex-container (

fleksni protok: ||

)

  • Opravdavaju-sadržaj

Svojstvo opravdanog sadržaja ima četiri vrijednosti: flex-start za poravnanje predmeta s lijeve strane spremnika; fleksibilni dio za poravnavanje predmeta s desnom stranom; središte za poravnavanje s središtem; razmak između za poravnavanje predmeta s jednakim razmakom između njih, s tim da su prva i posljednja predmeta poravnane s rubovima spremnika; i razmaka za poravnavanje savitljivih predmeta s jednakim razmakom oko njih, uključujući prvu i zadnju stavku. Flex-start je zadana vrijednost.

  • Poravnajte-stavke

Ovo svojstvo ima pet vrijednosti: protežu se da biste povećali fleksibilne predmete kako biste ispunili cijelu širinu ili visinu od križnog početka do križnog kraja spremnika; fleksibilni start za slaganje predmeta na poprečnom startu; flex-end za slaganje predmeta na poprečni kraj; središte za poravnavanje predmeta u sredini križne osi; i osnovna linija za poravnavanje stavki tako da se njihove polazne linije poravnaju. Stretch je zadana vrijednost.

  • Poravnajte-sadržaj

Ovo svojstvo poravnava linije fleksibilnog spremnika kad u poprečnoj osi ima dodatnog prostora. Njegove vrijednosti su: protežu se za raspodjelu prostora nakon svakog reda; fleksibilni start za slaganje predmeta prema poprečnom startu; flex-end za slaganje predmeta prema poprečnom kraju; središte za slaganje predmeta u sredinu križne osi; razmak-oko za jednaku raspodjelu prostora oko fleksibilnih predmeta. Zadana vrijednost je stretch.

Flexbox Properties - Svojstva fleksibilnih predmeta

Sada kada znate za svojstva spremnika Flexbox, pogledajmo svojstva predmeta:

  • Narudžba

Ovo svojstvo kontrolira redoslijed izgleda djece fleksibilnog spremnika. Oni se prema zadanom nalaze u fleksibilnom spremniku.

.flex-item (

narudžba: ;

)

Možete promijeniti redoslijed fleksibilnih stavki bez potrebe za restrukturiranjem HTML koda. Zadana vrijednost je nula.

  • Poravnajte-ja

Ovo svojstvo omogućuje nadjačavanje zadanog poravnanja određenog fleksibilnog predmeta. Možete koristiti vrijednosti iz poravnavanja stavki za ovaj entitet.

.flex-item (

poravnaj-samo: auto | fleksibilni start | fleks-kraj | središte | osnovna linija | protežu;

)

Automatska vrijednost u poravnavanju se izračunava vrijednošću elemenata poravnanja na nadređenom elementu. Ako element nema roditelja, umjesto njega koristi se stretch.

Osnovni primjeri

To je sve što trebate znati za korištenje izgleda CSS Flexbox mreže. Sada je vrijeme za vježbanje onoga što ste naučili. Evo nekoliko primjera koji vam pokazuju kako se sva ta svojstva spajaju. Započnimo s nečim apsolutno jednostavnim:

.pozorno (

prikaz: fleksibilnost;

visina: 300px;

)

.dijete (

širina: 100px;

visina: 100px;

marža: auto;

)

Ovo je primjer savršenog centriranja. Vrijednosti visine i širine mogu se mijenjati po želji. Ovdje je ključno postaviti maržu na "auto" tako da fleksibilni spremnik automatski apsorbira svaki dodatni prostor. Dovoljno jednostavno!

A sada krenimo na dodavanje još nekih svojstava: popis sa šest stavki fiksnih dimenzija koje se mogu automatski prilagoditi. Moraju se ravnomjerno rasporediti na vodoravnu os.

.flex-container (

prikaz: fleksibilnost;

opravdati-sadržaj: prostor oko;

)

Zatim pokušajmo centrirati navigacijsku navigaciju za srednje veličine ekrana i izvršiti je jednostrukom na malim uređajima.

/ * Veliki * /

.navigation (

prikaz: fleksibilnost;

fleksni tok: omotavanje reda;

opravdati-sadržaj: flex-end;

)

/ * Srednji zasloni * /

@media all i (max. širina: 800px) (

.navigation (

opravdati-sadržaj: prostor oko;

)

)

/ * Mali ekrani * /

@media all i (max. širina: 500px) (

.navigation (

fleks-smjer: stupac;

)

)

Vrijeme je da napravite ovaj korak dalje! Pokušajmo s mobilnim uređajem koji sadrži prvi stupac, podnožje i zaglavlje pune širine i neovisan o redoslijedu izvora.

.omot (

prikaz: fleksibilnost;

fleksni tok: omotavanje reda;

)

/ * Kažemo da su svi predmeti 100% širine * /

.header, .main, .nav, .aside, .footer (

fleks: 1 100%;

)

/ * Oslanjamo se na izvorni nalog za mobilni pristup prvi put * /

/ * Srednji zasloni * /

@media all i (minimalna širina: 600px) (

.aside (flex: 1 auto; )

)

/ * Veliki ekrani * /

@media all i (minimalna širina: 800px) (

.main (flex: 2 0px; )

.aside-1 (poredak: 1; )

.mag (poredak: 2; )

.aside-2 (poredak: 3; )

.footer (poredak: 4; )

)

Zaključak

Ovo su samo neki osnovni primjeri. Možete se igrati puno više s izgledima rešetke CSS Flexbox-a, a oni su apsolutno neprocjenjivi ako želite napraviti responzivnu web stranicu.

Preporučeni članci

Dakle, evo nekoliko članaka koji će vam pomoći da saznate više o svojstvima flexbox-a, flexbox koda i o css flexbox mreži, zato samo prođite dolje navedenu vezu.

  1. HTML u odnosu na XML - najbolje razlike
  2. CSS3 vs CSS - u čemu se razlikuju? (Infograph)
  3. HTML razlike u CSS-u
  4. HTML5 vs Flash

Kategorija:

Alati za web razvoj