Kako koristiti Flex da svoju web stranicu učinite responzivnijom

Moderni dizajn web stranica mora biti osjetljiv na promjene sadržaja ili veličine preglednika. To možete postići koristeći vanilla CSS, medijske upite ili flexbox.

Određena svojstva savijanja kao što su flex-wrap ili flex-grow mogu promijeniti veličinu ili mjesto elementa na vizualno privlačan način. Ovaj članak će proći kroz primjere kako možete koristiti svojstva flex-grow, flex-shrink, flex-wrap, flex-flow i order flex.

Kako postaviti CSS Flex Display

Ako vam nije poznato osnove flexboxa, ovo možete istražiti CodePen isječak. Sadrži primjer koda za jednostavno postavljanje flexboxa. Prvo, morat ćete umotati podređene stavke pod nadređeni div ili "fleksibilni spremnik".

<div klasa="roditelj">
<div klasa="podređeni predmet"></div>
<div klasa="podređeni predmet"></div>
<div klasa="podređeni predmet"></div>
</div>

Dodajte zaslon: flex svojstvo roditeljskom div.

.roditelj {
 zaslon: flex;
}

Kako uzgajati artikle u kontejneru

The flex-grow svojstvo omogućuje podređenim stavkama da se prošire kako bi popunile prostor dostupan u svom roditeljskom div. Ovo svojstvo vam omogućuje da odredite "omjer" količine prostora koji svaka stavka kutije može zauzeti.

Da biste dodali flex-grow, dodajte svojstvo flex-grow CSS svakoj od podređenih stavki.

<div klasa="roditelj">
<div stil="boja pozadine: crvena; flex-grow: 1"></div>
<div stil="boja pozadine: narančasta; flex-grow: 1"></div>
<div stil="boja pozadine: žuta; flex-grow: 1"></div>
<div stil="boja pozadine: zelena; flex-grow: 3"></div>
<div stil="boja pozadine: plava; flex-grow: 1"></div>
</div>

.roditelj {
 širina: 500px;
 zaslon: flex; 
}

Flex-grow od 0 za svaku stavku znači da se okviri neće proširiti kako bi ispunili prostor svog roditelja. 0 je zadana vrijednost za ovo svojstvo.

Flex-grow od 1 za svaku stavku prisilit će sve kutije da se jednako prošire kako bi se uklopile u raspoloživi prostor unutar roditelja.

Ako je jedna od stavki imala veći rast savitljivosti, na primjer:

<div stil="boja pozadine: zelena; flex-grow: 3"></div>

Zelena kutija pokušat će dobiti do tri puta veću količinu prostora od ostalih kutija.

Pogledajte kod za svojstvo flex-grow u ovome CodePen isječak vidjeti radni primjer.

Kako smanjiti predmete unutar kontejnera

U nekim slučajevima, širina roditelja se može smanjiti i stavke unutar roditelja više neće stati unutra. Možete koristiti flex-shrink svojstvo smanjenja veličine kutija. Na taj način mogu ostati zadržani unutar roditelja.

Flex-shrink vam omogućuje da odredite omjer za koliko se svaka stavka treba smanjiti.

Dodajte svojstvo flex-shrink podređenim div stavkama. Promijenite širinu roditelja i djece tako da predmeti ne stanu u spremnik.

<div klasa="roditelj">
<div stil="boja pozadine: crvena; fleksibilno skupljanje: 1"></div>
<div stil="boja pozadine: narančasta; fleksibilno skupljanje: 1"></div>
<div stil="boja pozadine: žuta; fleksibilno skupljanje: 1"></div>
<div stil="boja pozadine: zelena; fleksibilno skupljanje: 2"></div>
<div stil="boja pozadine: plava; fleksibilno skupljanje: 1"></div>
</div>

.roditelj {
 širina: 500px;
 zaslon: flex; 
}
.roditelj div {
 širina: 150px;
 visina: 150px;
}

Flex-shrink od 1 za sve stavke znači da će se sve stavke jednako smanjiti ako se širina roditelja smanji.

Ako je jedan od stavki imao veće savitljivo skupljanje, na primjer:

<div stil="boja pozadine: zelena; fleksibilno skupljanje: 2"></div>

Zelena kutija pokušat će se smanjiti dvostruko više od ostalih kutija.

Pogledajte kod za svojstvo flex-shrink u ovome CodePen isječak vidjeti radni primjer.

Kako gurnuti stavke u sljedeći red

The flex-wrap svojstvo vam omogućuje da gurnete stavke u sljedeći redak ako se ne uklapaju u širinu roditeljskog spremnika. Ovdje se predmeti ne skupljaju, a moći ćete sačuvati visinu i širinu predmeta.

Opcije za svojstvo flex-wrap uključuju:

flex-wrap: nowrap | zamotati | zamotati-obrnuti

Dodajte svojstvo flex-wrap roditeljskom flex-spremniku. Provjerite je li širina spremnika dovoljno mala, tako da ne stane podređenim predmetima u njemu. Time će se sve stavke koje prelijevaju staviti u novi red.

<div klasa="roditelj">
<div klasa="Crvena"></div>
<div klasa="naranča"></div>
<div klasa="žuta boja"></div>
<div klasa="zelena"></div>
<div klasa="plava"></div>
</div>

.roditelj {
 širina: 300px;
 obrub: 1px puna crna;
 zaslon: flex;
 flex-wrap: omotati;
}
.roditelj div {
 širina: 100px;
 visina: 100px;
}

Vrijednost omota pozicionira stavke počevši u gornjem desnom kutu spremnika. Vrijednost wrap-reverse premjestit će stavke na početak u donjem desnom kutu spremnika. Prilikom omatanja predmeta, gurnut će stavke u novi red iznad umjesto ispod.

Ako navedete visinu na nadređenom spremniku, spremnik će dodati razmak između redaka stavki.

Ako želite ukloniti ovaj razmak, ali zadržati visinu roditeljskog diva, upotrijebite svojstvo align-content. Navedite svojstvo align-content kao "flex-start" u nadređenom div:

.roditelj { 
 širina: 300px; 
 visina: 300px;
 obrub: 1px puna crna; 
 zaslon: flex;
 flex-wrap: omotati; 
 align-content: flex-početak;
}

Svojstvo align-content jedno je od nekoliko osnovnih flexbox svojstva koja vam omogućuju kontrolu poravnanja.

Pogledajte kod za svojstvo flex-wrap u ovome CodePen isječak vidjeti neke primjere.

Kako gurnuti stavke u sljedeći stupac

Ako koristite drugačiji izgled (kao što je stupac), a još uvijek trebate elemente za premotavanje, možete koristiti flex-flow imovine. Ovo svojstvo flex je kombinacija svojstava flex-wrap i flex-direction.

Primjeri kombinacija opcija koje možete koristiti za svojstvo flex-flow uključuju:

flex-wrap: red nowrap | stupac nowrap | zamotavanje reda | omotač stupca | row wrap-reverse | omotač stupca-obrnuti

Ovo svojstvo radi slično svojstvu flex-wrap iznad. Dodajte flex-flow roditeljskom flex spremniku. Provjerite je li širina roditeljskog spremnika dovoljno mala da prisili podređene stavke da se omotaju:

.roditelj {
 širina: 300px; 
 obrub: 1px puna crna; 
 zaslon: flex; 
 flex-flow: omotač stupca;
}
.roditelj div {
 širina: 100px;
 visina: 100px;
}

Stavke će se premotati u navedenom smjeru (redak ili stupac).

Pogledajte kod za svojstvo flex-flow u ovome CodePen isječak vidjeti neke primjere.

Kako promijeniti redoslijed stavki

Ako ste zbog bilo kakvih dinamičkih podataka morali preurediti stavke na stranici, možete upotrijebiti narudžba flex svojstvo. Ovo svojstvo vam omogućuje da odredite redoslijed pojavljivanja svake stavke.

Brojevi ne moraju nužno počinjati od 1. Možete koristiti bilo koje brojeve i intervale, a svojstvo order će poredati HTML elemente od najnižeg prema najvišem.

Dodajte svojstvo narudžbe svakoj od stavki unutar roditeljskog flex spremnika:

<div klasa="roditelj">
<div klasa="Crvena" stil="redoslijed: 2"></div>
<div klasa="naranča" stil="redoslijed: 1"></div>
<div klasa="žuta boja" stil="redoslijed: 5"></div>
<div klasa="zelena" stil="redoslijed: 4"></div>
<div klasa="plava" stil="redoslijed: 3"></div>
</div>

U ovom slučaju, narančasta kutija bit će krajnje desno, a slijede crvene, plave, zelene, a zatim žute kutije.

Ovdje pogledajte kod za svojstvo narudžbe CodePen isječak vidjeti neke primjere.

Eksperimentirajte s više CSS svojstava na vašoj web stranici

Možete koristiti ova flex svojstva kako biste svoju web stranicu učinili responzivnijom. To uključuje korištenje svojstava flex-grow, flex-shrink, flex-wrap, flex-flow i order flex.

Također možete saznati više o fleksibilnim svojstvima koja će vam pomoći da uskladite HTML elemente na vašoj web stranici.

Kako koristiti Flex za poravnavanje HTML elemenata

Pročitajte dalje

O autoru