Izgled pomoću CSS Flexboxa. Izgled pomoću CSS Flexboxa Fragment izgleda odjeljka s obrascem

Ukratko, izgled s Flexboxom nam daje jednostavna rješenja nekoć teške zadatke. Na primjer, kada trebate okomito poravnati element ili pritisnuti podnožje na dno zaslona ili jednostavno umetnuti nekoliko blokova u jedan red tako da zauzmu sav slobodni prostor. Slični problemi mogu se riješiti i bez fleksa. Ali u pravilu, ta su rješenja više poput "štaka" - tehnika za korištenje CSS-a u svrhe koje nisu predviđene. Dok se s flexboxom takvi zadaci rješavaju točno onako kako je flex model namijenjen.

CSS Flexible Box Layout Module (CSS modul za rasporede s fleksibilnim blokovima), skraćeno flexbox, stvoren je kako bi uklonio nedostatke pri izradi najrazličitijih HTML dizajna, uključujući one prilagođene različitim širinama i visinama, te izgled učinio logičnim i jednostavnim . A logičan pristup, u pravilu, djeluje na neočekivanim mjestima, gdje rezultat nije provjeren - logika je sve!

Flexbox vam omogućuje elegantnu kontrolu najviše različite parametre elementi unutar spremnika: smjer, redoslijed, širina, visina, poravnanje uzduž i poprijeko, raspodjela slobodnog prostora, istezanje i sabijanje elemenata.

Osnovno znanje

FlexBox se sastoji od spremnika i njegovih stavki (fleksibilnih elemenata).

Da biste omogućili flexbox, bilo tko HTML element samo dodijelite CSS svojstvo display:flex; ili display:inline-flex; .

Nakon što omogućite svojstvo flex, unutar spremnika se stvaraju dvije osi: glavna i poprečna (okomita (⊥), poprečna os). Svi ugniježđeni elementi (prve razine) poredani su duž glavne osi. Standardno je glavna os vodoravna i usmjerena slijeva na desno (→), a poprečna os je odgovarajuće okomita i usmjerena odozgo prema dolje (↓).

Glavna i poprečna os se mogu zamijeniti, tada će elementi biti smješteni odozgo prema dolje (↓), a kada više ne odgovaraju po visini, pomaknut će se slijeva na desno (→) - odnosno osi su jednostavno zamijenile mjesta . U tom slučaju početak i kraj rasporeda elemenata se ne mijenjaju – mijenjaju se samo pravci (osi)! Zbog toga morate zamisliti sjekire unutar kontejnera. No, ne treba misliti da postoje neke “fizičke” osovine i da one na nešto utječu. Ovdje je os samo smjer kretanja elemenata unutar spremnika. Na primjer, ako smo odredili poravnanje elemenata prema središtu glavne osi i zatim promijenili smjer ove glavne osi, tada će se poravnanje promijeniti: elementi su bili u sredini vodoravno, ali su postali u sredini okomito... Pogledajte primjer.

Još jedna važna značajka Flexboxa je prisutnost redova u poprečnom smjeru. Da bismo razumjeli o čemu govorimo, zamislimo da postoji glavna vodoravna os, ima mnogo elemenata i oni ne “stanu” u spremnik, pa se pomiču u drugi red. Oni. spremnik izgleda ovako: spremnik s dva reda unutar njega, svaki red sadrži nekoliko elemenata. Predstavljeno? Zapamtite da možemo okomito poravnati ne samo elemente, već i retke! Kako to funkcionira jasno se vidi u primjeru nekretnine. A evo kako to shematski izgleda:

CSS svojstva koja mogu utjecati na model izgleda: float, clear, vertical-align, stupci ne rade u flex dizajnu. Ovdje se koristi drugačiji model za konstruiranje izgleda i ta se CSS svojstva jednostavno ignoriraju.

Flexbox CSS svojstva

Flexbox sadrži različite css pravila za kontrolu cjelokupnog savitljivog dizajna. Neke je potrebno primijeniti na glavni spremnik, a druge na elemente ovog spremnika.

Za kontejner

prikaz:

Omogućuje svojstvo flex za element. Ovo svojstvo pokriva sam element i njegove ugniježđene elemente: utječe samo na potomke prve razine - oni će postati elementi flex spremnika.

savijati- element se proteže cijelom širinom i ima svoj puni prostor među okolnim blokovima. Prijelomi redaka javljaju se na početku i na kraju bloka.
inline-flex- element je omotan oko drugih elemenata. U ovom slučaju, njegov unutarnji dio je formatiran kao blok element, a sam element je formatiran kao inline.

flex i inline-flex razlikuju se po tome što drugačije komuniciraju s okolnim elementima, slično kao display:block i display:inline-block.

smjer savijanja:

Mijenja smjer glavne osi spremnika. U skladu s tim mijenja se poprečna os.

red (zadano)- smjer elemenata s lijeva na desno (→)
stupac- smjer elemenata odozgo prema dolje (↓)
red-obrnuti- smjer elemenata s desna na lijevo (←)
stupac-revers- smjer elemenata odozdo prema gore ()

flex-wrap:

Kontrolira prijenos elemenata koji ne stanu u spremnik.

Nowrap (zadano)- ugniježđeni elementi se postavljaju u jedan red (s direction=row) ili u jedan stupac (s direction=column) bez obzira da li stanu u spremnik ili ne.
omotati- uključuje premještanje elemenata u sljedeći red ako ne stanu u spremnik. Time je omogućeno pomicanje elemenata duž poprečne osi.
preokrenuti- isto što i wrap, samo prijenos neće biti dolje, već gore (u suprotnom smjeru).

flex-flow: smjerni omot

Kombinira svojstva savijanja i savijanja. Često se koriste zajedno, tako da je stvoreno svojstvo flex-flow da pomogne u pisanju manje koda.

flex-flow prihvaća vrijednosti ova dva svojstva, odvojena razmakom. Ili možete navesti jednu vrijednost za bilo koje svojstvo.

/* samo flex-direction */ flex-flow: red; flex-flow: row-reverse; flex-flow: stupac; flex-flow: stupac-obrnuti; /* samo flex-wrap */ flex-flow: nowrap; flex-flow: omotati; flex-flow: wrap-reverse; /* obje vrijednosti odjednom: flex-direction i flex-wrap */ flex-flow: row nowrap; flex-flow: omotač stupca; flex-flow: stupac-reverse wrap-reverse; opravdanje sadržaja:

Poravnava elemente duž glavne osi: ako je smjer=redak, onda vodoravno, a ako je smjer=stupac, onda okomito.

fleksibilni početak (zadano)- elementi će ići od početka (možda će ostati nešto mjesta na kraju).
savitljivi kraj- elementi su poravnati na kraju (razmak će ostati na početku)
centar- u sredini (prostor će ostati lijevo i desno)
razmak između- krajnji vanjski elementi su pritisnuti uz rubove (razmak između elemenata je ravnomjerno raspoređen)
prostor-okolo- slobodni prostor je ravnomjerno raspoređen između elemenata (najudaljeniji elementi nisu pritisnuti uz rubove). Razmak između ruba spremnika i vanjskih elemenata bit će upola manji od razmaka između elemenata u sredini reda.
prostorno ravnomjerno

poravnati sadržaj:

Poravnava retke koji sadrže elemente duž poprečne osi. Isto kao i justify-content samo za suprotnu os.

Napomena: radi kada postoje najmanje 2 reda, tj. Ako postoji samo 1 red, ništa se neće dogoditi.

Oni. ako je flex-direction: row, tada će ovo svojstvo okomito poravnati nevidljive retke. Ovdje je važno napomenuti da visina bloka mora biti rigidno postavljena i mora biti veća od visine redova, inače će sami redovi rastegnuti spremnik i svako njihovo poravnanje postaje besmisleno, jer između njih nema slobodnog prostora. njih... Ali kada je flex-direction: stupac, tada se redovi pomiču vodoravno → i širina spremnika je gotovo uvijek veća od širine redaka i poravnavanje redaka odmah ima smisla...

istezanje (zadano)- redovi se razvlače kako bi se red u potpunosti ispunio
flex-start- redovi su grupirani na vrhu spremnika (može ostati nešto prostora na kraju).
savitljivi kraj- redovi su grupirani na dnu spremnika (prostor će ostati na početku)
centar- redovi su grupirani u središtu spremnika (prostor će ostati na rubovima)
razmak između- vanjski redovi su pritisnuti uz rubove (razmak između redova je ravnomjerno raspoređen)
prostor-okolo- slobodni prostor je ravnomjerno raspoređen između redova (najudaljeniji elementi nisu pritisnuti na rubove). Razmak između ruba spremnika i vanjskih elemenata bit će upola manji od razmaka između elemenata u sredini reda.
prostorno ravnomjerno- isto kao space-around, samo je udaljenost između vanjskih elemenata i rubova spremnika ista kao i između elemenata.

poravnanje stavki:

Poravnava elemente duž poprečne osi unutar retka (nevidljivi red). Oni. Sami redovi se poravnavaju preko align-content , a elementi unutar tih redova (redova) se poravnavaju preko align-items i to po cijeloj poprečnoj osi. Ne postoji takva podjela po glavnoj osi, nema koncepta redaka i elementi se poravnavaju kroz justify-content.

istezanje (zadano)- elementi se razvlače tako da popune liniju u potpunosti
flex-start- elementi su pritisnuti na početak reda
savitljivi kraj- elementi su pritisnuti do kraja reda
centar- elementi su poravnati prema sredini retka
Osnovna linija- elementi su poravnati s osnovnom linijom teksta

Za elemente kontejnera

flex-grow:

Postavlja faktor povećanja elementa kada u spremniku ima slobodnog prostora. Zadani flex-grow: 0 tj. nijedan od elemenata ne bi trebao rasti i puniti se slobodno mjesto u kontejneru.

Zadani flex-grow: 0

Ako navedete flex-grow:1 za sve elemente, tada će se svi jednako rastegnuti i ispuniti sav slobodni prostor u spremniku.
Ako jednom od elemenata navedete flex-grow:1, on će ispuniti sav slobodni prostor u spremniku i poravnanja putem justify-contenta više neće raditi: nema slobodnog prostora za poravnanje...
Uz flex-grow:1 . Ako jedan od njih ima flex-grow:2 tada će biti 2 puta veći od svih ostalih
Ako sve flex kutije unutar flex spremnika imaju flex-grow:3 tada će biti iste veličine
Uz flex-grow:3 . Ako jedan od njih ima flex-grow:12 onda će biti 4 puta veći od svih ostalih

Kako radi? Recimo da je spremnik širok 500 piksela i sadrži dva elementa, svaki s osnovnom širinom od 100 piksela. To znači da je u spremniku ostalo 300 slobodnih piksela. Sada, ako navedemo flex-grow:2; , a drugi flex-grow: 1; , tada će blokovi zauzeti cijelu dostupnu širinu spremnika te će širina prvog bloka biti 300px, a drugog 200px. To se objašnjava činjenicom da je raspoloživih 300px slobodnog prostora u spremniku raspoređeno između elemenata u omjeru 2:1, +200px za prvi i +100px za drugi.

Napomena: u vrijednosti možete navesti razlomke, na primjer: 0,5 - flex-grow:0,5

savijanje:

Postavlja redukcijski faktor elementa. Svojstvo je suprotno od flex-grow i određuje kako bi se element trebao smanjiti ako u spremniku nema slobodnog prostora. Oni. svojstvo počinje raditi kada je zbroj veličina svih elemenata veći od veličine spremnika.

Zadano savijanje:1

Recimo da je spremnik širok 600px i sadrži dva elementa, svaki širok 300px - flex-basis:300px; . Oni. dva elementa potpuno ispunjavaju spremnik. Dajte prvom elementu flex-shrink: 2; , a drugi flex-shrink: 1; . Sada smanjimo širinu spremnika za 300px, tj. elementi se moraju smanjiti za 300px da bi stali u spremnik. Skupljat će se u omjeru 2:1, tj. prvi blok će se smanjiti za 200px, a drugi za 100px i nove veličine elemenata će postati 100px i 200px.

Napomena: u vrijednosti možete navesti razlomke, na primjer: 0,5 - flex-shrink:0,5

fleksibilna osnova:

Postavlja osnovnu širinu elementa - širinu prije nego što se izračunaju drugi uvjeti koji utječu na širinu elementa. Vrijednost se može navesti u px, em, rem, %, vw, vh itd. Konačna širina ovisit će o osnovnoj širini i vrijednostima flex-grow, flex-shrink i sadržaju unutar bloka. Uz auto, element dobiva osnovnu širinu u odnosu na sadržaj unutar njega.

Zadano: automatski

Ponekad je bolje postaviti širinu elementa kroz uobičajeno svojstvo širine. Na primjer, širina: 50%; će značiti da će element unutar spremnika biti točno 50%, ali svojstva savijanja rasta i savijanja skupljanja i dalje će raditi. Ovo može biti potrebno kada je element rastegnut sadržajem unutar njega, više nego što je navedeno u flex-basisu. Primjer.

flex-basis će biti "krut" ako su istezanje i skupljanje postavljeni na nulu: flex-basis:200px; flex-grow:0; savijanje-skupljanje:0; . Sve se to može napisati ovako: flex:0 0 200px; .

savijanje: (rast, skupljanje, baza)

Kratki sažetak tri svojstva: flex-grow flex-shrink flex-basis .

Zadano: fleksibilno: 0 1 automatski

Međutim, možete navesti jednu ili dvije vrijednosti:

Flex: nema; /* 0 0 auto */ /* broj */ flex: 2; /* flex-grow (flex-basis ide na 0) */ /* nije broj */ flex: 10em; /* flex-basis: 10em */ flex: 30px; /* flex-basis: 30px */ flex: auto; /* flex-basis: auto */ flex: content; /* flex-basis: sadržaj */ flex: 1 30px; /* flex-grow i flex-basis */ flex: 2 2; /* flex-grow i flex-shrink (flex-basis ide na 0) */ flex: 2 2 10%; /* flex-grow i flex-shrink i flex-basis */ align-self:

Omogućuje promjenu svojstva align-items samo za jedan element.

Zadano: iz spremnika align-items

protežu se- element je rastegnut da u potpunosti ispuni liniju
flex-start- element je pritisnut na početak retka
savitljivi kraj- element je pritisnut do kraja retka
centar- element je poravnat sa središtem linije

Osnovna linija- element je poravnat s osnovnom linijom teksta

narudžba:

Omogućuje promjenu redoslijeda (pozicije, pozicije) elementa u općem retku.

Zadano: poredak: 0

Prema zadanim postavkama, elementi imaju redoslijed: 0 i postavljaju se redoslijedom pojavljivanja u HTML kodu i smjerom retka. Ali ako promijenite vrijednost svojstva poredak, tada će elementi biti raspoređeni po redoslijedu vrijednosti: -1 0 1 2 3 ... . Na primjer, ako navedete redoslijed: 1 za jedan od elemenata, tada će prvo ići sve nule, a zatim element s 1.

Na taj način, primjerice, možete pomaknuti prvi element do kraja bez promjene smjera kretanja ostalih elemenata ili HTML koda.

Bilješke

Koja je razlika između flex-basis i širine?

Ispod su važne razlike između flex-basis i širine/visine:

flex-basis radi samo za glavnu os. To znači da s flex-direction:row flex-basis kontrolira širinu, a s flex-direction:column visinu. .

flex-basis odnosi se samo na flex elemente. To znači da ako onemogućite flex za spremnik, ovo svojstvo neće imati učinka.

Apsolutni elementi spremnika ne sudjeluju u konstrukciji flex-a... To znači da flex-basis ne utječe na flex elemente spremnika ako su apsolutni position:absolute . Morat će navesti širinu/visinu.

Kada koristite svojstvo flex, 3 vrijednosti (flex-grow/flex-shrink/flex-basis) mogu se kombinirati i kratko napisati, ali za širinu grow ili shrink morate pisati odvojeno. Na primjer: flex:0 0 50% == width:50%; savijanje-skupljanje:0; . Ponekad je jednostavno nezgodno.

Ako je moguće, ipak preferirajte fleksibilnu bazu. Koristite širinu samo kada fleksibilna osnova nije prikladna.

Razlika između flex-basis i width - greška ili značajka?

Sadržaj unutar flex elementa ga gura i ne može ići izvan njega. Međutim, ako postavite širinu koristeći width ili max-width umjesto flex-basis, tada će se element unutar flex spremnika moći proširiti izvan granica tog spremnika (ponekad je to upravo ono ponašanje koje želite). Primjer:

Primjeri Flex rasporeda

Nigdje u primjerima ne koriste se prefiksi za kompatibilnost s više preglednika. Ovo sam učinio za lakše čitanje css-a. Stoga pogledajte primjere u najnovije verzije Chrome ili Firefox.

#1 Jednostavan primjer s okomitim i vodoravnim poravnanjem

Krenimo od samog početka jednostavan primjer- vertikalno i horizontalno poravnanje istovremeno i na bilo kojoj visini bloka, čak i gume.

Tekst u sredini

Ili ovako, bez bloka unutra:

Tekst u sredini

#1.2 Razdvajanje (prekid) između savitljivih blok elemenata

Da biste pozicionirali elemente spremnika duž rubova i nasumično odabrali element nakon kojeg će doći do prekida, morate koristiti svojstvo margin-left:auto ili margin-right:auto.

#2 Prilagodljivi izbornik na flexu

Napravimo izbornik na samom vrhu stranice. Na širokom zaslonu trebao bi biti s desne strane. U prosjeku poravnajte u sredini. A na malom svaki element mora biti u novom retku.

Početna O nama Proizvodi Kontakti

#3 Prilagodljiva 3 stupca

Ovaj primjer pokazuje kako brzo i praktično napraviti 3 stupca, koji će se, kada se suže, pretvoriti u 2, a zatim u 1.

Imajte na umu da se to može učiniti bez korištenja medijskih pravila, sve je na flex-u.

Idite na jsfiddle.net i promijenite širinu odjeljka "rezultat".

#4 Adaptivni blokovi na savitljivosti

Recimo da trebamo ispisati 3 bloka, jedan veliki i dva mala. Pritom je potrebno blokove prilagoditi malim ekranima. Radimo:

Idite na jsfiddle.net i promijenite širinu odjeljka "rezultat".

#5 Galerija sa savijanjem i prijelazom

Ovaj primjer pokazuje kako brzo možete napraviti slatku harmoniku sa slikama koristeći flex. Obratite pozornost na svojstvo prijelaza za flex.

#6 Flex to Flex (samo primjer)

Zadatak je napraviti fleksibilan blok. Tako da početak teksta u svakom bloku bude u istoj liniji vodoravno. Oni. Kako se širina sužava, blokovi rastu u visinu. Potrebno je da je slika na vrhu, gumb je uvijek na dnu, a tekst u sredini počinje duž jedne horizontalne linije...

Kako bi se riješio ovaj problem, sami blokovi se rastežu fleksom i postavljaju na najveću moguću širinu. Svaki unutarnji blok također je fleksibilna struktura, s rotiranom osi flex-direction:column; a element u sredini (gdje je tekst) je rastegnut flex-grow:1; popuniti sav slobodan prostor, ovako se postiže rezultat - tekst je počeo jednim redom...

Više primjera

Podrška preglednika - 98,3%

Naravno, ne postoji puna podrška, ali svi moderni preglednici podržavaju flexbox dizajne. Neki i dalje zahtijevaju prefikse. Za pravu sliku, pogledajmo caniuse.com i vidjet ćemo da će 96,3% preglednika koji se danas koriste raditi bez prefiksa, a 98,3% koristi prefikse. Ovo je izvrstan pokazatelj za pouzdano korištenje flexboxa.

Kako bih znao koji su prefiksi relevantni danas (lipanj 2019.), dat ću primjer svih flex pravila s s potrebnim prefiksima:

/* Spremnik */ .flex ( display:-webkit-box; display:-ms-flexbox; display:flex; display:-webkit-inline-box; display:-ms-inline-flexbox; display:inline-flex; -webkit-box-orient:vertical; -webkit-box-direction:normal; -ms-flex-direction:column; flex-direction:column; -ms-flex-wrap:wrap; flex-wrap:wrap; -ms -flex-flow:prelom stupca; flex-flow:prelom stupca; -webkit-box-pack:poravnanje; -ms-flex-pack:poravnanje; opravdavanje-sadržaja:razmak-između; -ms-flex-line-pack: distribuirati; align-content:space-around; ) /* Elementi */ .flex-item ( -webkit-box-flex:1; -ms-flex-positive:1; flex-grow:1; -ms-flex- negative:2; flex-shrink:2; -ms-flex-preferred-size:100px; flex-basis:100px; -ms-flex:1 2 100px; flex:1 2 100px; -ms-flex-item-align :centar; align-self:center; -webkit-box-ordinal-group:3; -ms-flex-order:2; order:2; )

Bolje je ako svojstva s prefiksima idu ispred izvornog svojstva.
Ovaj popis ne sadrži prefikse koji su danas nepotrebni (prema caniuseu), ali općenito ima više prefiksa.

Krom	Safari	Firefox	Opera	tj.	Android	iOS
20- (stari)	3.1+ (staro)	2-21 (stari)		10 (tweener)	2.1+ (staro)	3.2+ (staro)
21+ (novo)	6.1+ (novo)	22+ (novo)	12.1+ (novo)	11+ (novo)	4.4+ (novo)	7.1+ (novo)

(novo) - nova sintaksa: display: flex; .
(tweener) - stara neslužbena sintaksa iz 2011.: display: flexbox; .
(staro) - stara sintaksa iz 2009.: display: box;

Video

Pa, ne zaboravite na video, ponekad je također zanimljiv i razumljiv. Evo nekoliko popularnih:

Korisni linkovi na Flexu

flexboxfroggy.com - flexbox obrazovna igra.

Flexplorer je vizualni alat za sastavljanje fleksibilnog koda.

Htio bih razgovarati o FlexBoxu. Flexbox-layout modul (fleksibilna kutija - “fleksibilni blok”, na ovaj trenutak W3C Preporuka kandidata ima za cilj ponuditi više učinkovita metoda raspored, poravnanje i raspodjela slobodnog prostora između elemenata u spremniku, čak i kada je njihova veličina nepoznata i/ili dinamična (odatle riječ "fleksibilan").

Glavna ideja fleksibilnog izgleda je dati spremniku mogućnost promjene širine/visine (i redoslijeda) svojih elemenata kako bi se bolje ispunio prostor (u većini slučajeva, kako bi se podržali svi tipovi zaslona i veličine zaslona).Fleksibilni spremnik rasteže elemente da popune prostor ili ih sažima kako bi spriječio njihovo prelijevanje.

Ono što je najvažnije, flexbox raspored ne ovisi o smjeru, za razliku od konvencionalnih izgleda (blokovi raspoređeni okomito i inline elementi raspoređeni vodoravno).Iako je uobičajeni izgled izvrstan za web-stranice, nedostaje mu fleksibilnost za podršku velikim ili složenim aplikacijama (osobito kada je u pitanju promjena orijentacije zaslona, promjena veličine, rastezanje, smanjivanje itd.).

Jer flexbox je cijeli modul, a ne samo jedno svojstvo, on kombinira mnoga svojstva.Neka od njih moraju se primijeniti na spremnik (roditeljski element, koji se naziva savitljivi spremnik), dok se druga svojstva primjenjuju na podređene elemente ili savitljive elemente.

Dok se uobičajeni raspored temelji na smjerovima protoka blok i inline elemenata, fleksibilni raspored temelji se na "fleksibilnim smjerovima protoka".

Flexbox

U osnovi, elementi će biti raspoređeni duž glavne osi (od glavnog početka do glavnog kraja) ili duž poprečne osi (od poprečnog početka do poprečnog kraja).

main-axis — glavna os duž koje se nalaze savitljivi elementi.Imajte na umu da mora biti vodoravan, sve ovisi o kvaliteti justify-sadržaja.
glavni početak | main-end - fleksibilni elementi se postavljaju u spremnik od glavne početne do glavne krajnje pozicije.
glavna veličina — širina ili visina savitljivog elementa ovisno o odabranoj glavnoj veličini.Osnovna veličina može biti širina ili visina elementa.
poprečna os - poprečna os okomita na glavnu.Njegov smjer ovisi o smjeru glavne osi.
unakrsni početak | cross-end - savitljive linije se pune elementima i stavljaju u spremnik od cross-start pozicije i cross-end pozicije.
Veličina križa — širina ili visina fleksibilnog elementa, ovisno o odabranoj dimenziji, jednaka je ovoj vrijednosti.Ovo svojstvo je isto kao širina ili visina elementa ovisno o odabranoj dimenziji.

Svojstva
zaslon: flex | inline-flex;

Definira flex spremnik (umetnuti ili blok ovisno o odabranoj vrijednosti), povezuje flex kontekst za sve njegove neposredne potomke.

prikaz: druge vrijednosti | savijati | inline-flex;

Imati na umu:

CSS stupci ne rade s flex spremnikomfloat, clear i vertical-align ne rade s fleksibilnim stavkama

flex-direction