Kako uporabiti Flex, da bo vaše spletno mesto bolj odzivno

Sodobni dizajni spletnih mest se morajo odzivati ​​na spremembe vsebine ali velikosti brskalnika. To lahko dosežete z uporabo vanilije CSS, medijskih poizvedb ali flexboxa.

Nekatere lastnosti flex, kot sta flex-wrap ali flex-grow, lahko spremenijo velikost ali lokacijo elementa na vizualno privlačen način. V tem članku bodo prikazani primeri, kako lahko uporabite lastnosti flex-grow, flex-shrink, flex-wrap, flex-flow in order flex.

Kako nastaviti CSS Flex Display

Če niste seznanjeni z osnove flexboxa, to lahko raziščete Odrezek CodePen. Vključuje primer kode za preprosto nastavitev flexboxa. Najprej boste morali podrejene elemente zaviti pod nadrejeni div ali "flex vsebnik".

<div razred="starš">
<div razred="otroški predmet"></div>
<div razred="otroški predmet"></div>
<div razred="otroški predmet"></div>
</div>

Dodajte zaslon: flex lastnost nadrejeni div.

.starš {
 zaslon: flex;
}

Kako gojiti predmete v zabojniku

The flex-grow lastnost omogoča, da se podrejeni elementi razširijo, da zapolnijo prostor, ki je na voljo v nadrejenem div. Ta lastnost vam omogoča, da določite "razmerje" prostora, ki ga lahko zasede vsak element škatle.

Če želite dodati flex-grow, dodajte lastnost CSS flex-grow vsakemu od podrejenih elementov.

<div razred="starš">
<div style="barva ozadja: rdeča; flex-grow: 1"></div>
<div style="barva ozadja: oranžna; flex-grow: 1"></div>
<div style="barva ozadja: rumena; flex-grow: 1"></div>
<div style="barva ozadja: zelena; flex-grow: 3"></div>
<div style="barva ozadja: modra; flex-grow: 1"></div>
</div>

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

Flex-grow 0 za vsak element pomeni, da se polja ne bodo razširila, da bi zapolnila prostor svojega starša. 0 je privzeta vrednost za to lastnost.

Flex-grow 1 za vsak element bo prisilil, da se vsa polja enako razširijo, da se prilegajo razpoložljivemu prostoru znotraj nadrejenega.

Če je eden od elementov imel večjo upogibno rast, na primer:

<div style="barva ozadja: zelena; flex-grow: 3"></div>

Zeleno polje bo poskušalo pridobiti do trikratno količino prostora kot druga polja.

Oglejte si kodo za lastnost flex-grow v tem Odrezek CodePen videti delujoč primer.

Kako skrčiti predmete v zabojniku

V nekaterih primerih se lahko širina starša skrči in elementi znotraj nadrejenega ne bodo več prilegali notri. Lahko uporabite flex-shrink lastnost zmanjšanja velikosti škatel. Na ta način lahko ostanejo zaprti v staršu.

Flex-shrink vam omogoča, da določite razmerje, za koliko se mora vsak element skrčiti.

Dodajte lastnost flex-shrink podrejenim elementom div. Spremenite širine nadrejenega in podrejenega, tako da predmeti ne sodijo v posodo.

<div razred="starš">
<div style="barva ozadja: rdeča; upogibno krčenje: 1"></div>
<div style="barva ozadja: oranžna; upogibno krčenje: 1"></div>
<div style="barva ozadja: rumena; upogibno krčenje: 1"></div>
<div style="barva ozadja: zelena; upogibno krčenje: 2"></div>
<div style="barva ozadja: modra; upogibno krčenje: 1"></div>
</div>

.starš {
 širina: 500px;
 zaslon: flex; 
}
.starš div {
 širina: 150px;
 višina: 150px;
}

Flex-shrink 1 za vse elemente pomeni, da se bodo vsi elementi zmanjšali enako, če se zmanjša širina starša.

Če je imel eden od predmetov večje upogibno krčenje, na primer:

<div style="barva ozadja: zelena; upogibno krčenje: 2"></div>

Zelena škatla se bo poskušala skrčiti dvakrat toliko kot druga polja.

Oglejte si kodo za lastnost flex-shrink Odrezek CodePen videti delujoč primer.

Kako potisniti elemente v naslednjo vrstico

The flex-wrap lastnost vam omogoča, da elemente potisnete v naslednjo vrstico, če se ne prilegajo širini nadrejenega vsebnika. Tukaj se predmeti ne skrčijo, ohranili pa boste lahko višino in širino predmetov.

Možnosti za lastnost flex-wrap vključujejo:

flex-wrap: nowrap | zaviti | zaviti-obrniti

Dodajte lastnost flex-wrap nadrejenemu flex-container. Prepričajte se, da je širina posode dovolj majhna, da se ne prilega otroškim predmetom v njej. To bo vse prepolne elemente prisililo v novo vrstico.

<div razred="starš">
<div razred="rdeča"></div>
<div razred="oranžna"></div>
<div razred="rumeno"></div>
<div razred="zelena"></div>
<div razred="modra"></div>
</div>

.starš {
 širina: 300px;
 obroba: 1px polno črna;
 zaslon: flex;
 flex-wrap: zaviti;
}
.starš div {
 širina: 100px;
 višina: 100px;
}

Vrednost preloma bo postavila elemente, ki se začnejo v zgornjem desnem kotu vsebnika. Vrednost ovijanja-obrnjenja bo prestavila elemente tako, da se bodo začeli v spodnjem desnem kotu vsebnika. Ko zavijate predmete, bo elemente potisnil v novo vrstico zgoraj namesto spodaj.

Če podate višino na nadrejenem vsebniku, bo vsebnik dodal razmik med vrsticami elementov.

Če želite odstraniti ta razmik, vendar ohraniti višino nadrejenega diva, uporabite lastnost align-content. Podajte lastnost align-content kot "flex-start" v nadrejenem div:

.starš { 
 širina: 300px; 
 višina: 300px;
 obroba: 1px polno črna; 
 zaslon: flex;
 flex-wrap: zaviti; 
 align-content: flex-začnite;
}

Lastnost align-content je ena od več jeder lastnosti flexboxa, ki vam omogočajo nadzor poravnave.

Oglejte si kodo za lastnost flex-wrap v tem Odrezek CodePen videti nekaj primerov.

Kako potisniti elemente v naslednji stolpec

Če uporabljate drugačno postavitev (na primer stolpec) in še vedno potrebujete elemente za ovijanje, lahko uporabite flex-flow lastnine. Ta lastnost flex je kombinacija lastnosti flex-wrap in flex-direction.

Primeri kombinacij možnosti, ki jih lahko uporabite za lastnost flex-flow, vključujejo:

flex-wrap: row nowrap | stolpec nowrap | zaviti vrstico | obloga kolone | ovijanje vrstice-obrnjeno | ovijanje stolpca-obrnjeno

Ta lastnost deluje podobno kot zgornja lastnost flex-wrap. Dodajte flex-flow v nadrejeni vsebnik flex. Prepričajte se, da je širina nadrejenega vsebnika dovolj majhna, da prisili podrejene elemente, da se zavijejo:

.starš {
 širina: 300px; 
 obroba: 1px polno črna; 
 zaslon: flex; 
 flex-flow: obloga kolone;
}
.starš div {
 širina: 100px;
 višina: 100px;
}

Elementi se bodo ovili v določeni smeri (vrstica ali stolpec).

Oglejte si kodo za lastnost flex-flow v tem Odrezek CodePen videti nekaj primerov.

Kako spremeniti vrstni red predmetov

Če ste morali zaradi kakršnih koli dinamičnih podatkov preurediti elemente na strani, lahko uporabite naročilo flex lastnost. Ta lastnost vam omogoča, da določite vrstni red, v katerem se prikaže vsak element.

Ni nujno, da se številke začnejo z 1. Uporabite lahko poljubne številke in intervale, lastnost naročila pa bo razvrstila elemente HTML od najnižje do najvišje.

Dodajte lastnost naročila vsakemu od elementov znotraj nadrejenega vsebnika flex:

<div razred="starš">
<div razred="rdeča" slog ="vrstni red: 2"></div>
<div razred="oranžna" slog ="vrstni red: 1"></div>
<div razred="rumeno" slog ="vrstni red: 5"></div>
<div razred="zelena" slog ="vrstni red: 4"></div>
<div razred="modra" slog ="vrstni red: 3"></div>
</div>

V tem primeru bo oranžno polje na skrajni desni, sledijo rdeča, modra, zelena in nato rumena polja.

Oglejte si kodo za lastnost naročila v tem Odrezek CodePen videti nekaj primerov.

Eksperimentirajte z več lastnostmi CSS na vašem spletnem mestu

Te lastnosti flex lahko uporabite, da bo vaše spletno mesto bolj odzivno. To vključuje uporabo lastnosti flex-grow, flex-shrink, flex-wrap, flex-flow in order flex.

Izvedete lahko tudi več lastnosti flex, ki vam bodo pomagale uskladiti elemente HTML na vašem spletnem mestu.

Kako uporabiti Flex za poravnavo elementov HTML

Preberite Naprej

O avtorju