Kako uporabiti Flex za poravnavo elementov HTML

Lastnosti flex v CSS vam omogočajo, da elemente poravnate bolj prilagodljivo in odzivno. To je uporabno, če želite, da so vaši elementi HTML bolj odzivni v spletnem brskalniku.

Ta članek bo obravnaval, kako lahko uporabite določene lastnosti flex. To vključuje lastnosti flex-direction, justify-content, align-self, align-items, align-content in gap.

Kako nastaviti CSS Flex Display

Primer strukture, ki jo lahko uporabite za raziskovanje osnove flexboxa je nabor podrejenih divjev pod enim nadrejenim div. V spodnji kodi je glavni "nadrejeni" div. Trije podrejeni divi predstavljajo elemente, ki jih lahko poravnate z uporabo flex lastnosti.

Da bo kateri koli flex styling deloval, boste morali dodati zaslon: flex lastnost nadrejenega vsebnika flex.

.parent {
 zaslon: flex;
}

Brez flexa se podrejeni divi prikazujejo eden za drugim v obliki stolpcev navzdol po strani.

Če si želite ogledati primer te nastavitve, si oglejte in zaženite kodo v tem Odrezek CodePen.

Kako nadzorovati smer postavitve

The flex-smer lastnost določa smer vrstice ali stolpca podrejenih elementov.

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

upogibna smer: vrstica | stolpec | vrstica-obrnjena | stolpec-obrnjeno

Dodati boste morali nadrejeni vsebnik, ki obdaja elemente, ki jih želite poravnati.

HTML:

CSS:

.red {barva ozadja: rdeča; }
.orange { barva ozadja: oranžna; }
.yellow { barva ozadja: rumena; }
.green {barva ozadja: zelena;}
.blue {barva ozadja: modra; }
.vijolična {barva ozadja: vijolična; }
.parent div {
 širina: 40px;
 višina: 40px;
}

Uporabite lastnost flex-direction za nadrejeni vsebnik flex. To bo poravnalo podrejene elemente div.

.parent {
 širina: 300px;
 zaslon: flex; 
 flex-direction: vrstica;
}

Številne lastnosti flex se nanašajo na koncept glavne osi in prečne osi. Ko je flex-direction vrstico, glavna os predstavlja vodoravno smer, prečna os pa navpično. Vrednost stolpca preklopi te osi.

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

Kako poravnati elemente vzdolž križne osi

The poravnajte elemente lastnost nadzoruje poravnavo elementov vzdolž prečne osi. Za privzeto flex-direction, row, align-items nadzoruje navpično poravnavo elementov.

Možnosti za lastnost align-items vključujejo:

align-items: flex-start | flex-end | poravnaj elemente | raztegniti

Dodajte lastnost align-items v nadrejeni vsebnik, da poravnate njegove podrejene.

.parent {
 zaslon: flex; 
 align-items: flex-start;
}

Poleg tega se lahko odločite za poravnavo elementov z osnovno črto. Možnost osnovne črte privzeto poravna vse elemente na podlagi osnove elementov.

Izberete lahko tudi, od kod se začne osnovna črta, na primer zgoraj (prva osnovna črta) ali dno (zadnja osnovna črta).

align-items: baseline | prva izhodiščna vrednost | zadnja izhodiščna vrednost;

Za poravnavo elementov: osnovna linija za delovanje, poskrbite, da ima vsak element drugačno višino ali širino (odvisno od osi, ki jo uporabljate).

​​​

Oglejte si kodo za lastnost align-items v tem Odrezek CodePen videti nekaj primerov.

Kako preglasiti poravnavo posameznih elementov

Lahko uporabite poravnaj-sebe lastnost, da preglasi kateri koli slog elementov poravnave nadrejenega vsebnika. To pomeni, da lahko za posamezen element nastavite ločeno upogljivo poravnavo.

Možnosti za lastnost align-self vključujejo:

align-self: samodejno | flex-start | flex-end | središče | izhodišče | raztegniti

Recimo na primer, da ima nadrejeni vsebnik stilsko upogibno smer, nastavljeno na "vrstica".

.parent {
 zaslon: flex; 
 flex-direction: vrstica;
}

Lastnost align-self lahko uporabite za posamezen element. Posamezni element bo uporabil slog lastnosti align-self in bo element centriral čez nadrejeni vsebnik.

Oglejte si kodo za lastnost align-self v tem Odrezek CodePen videti nekaj primerov.

Kako porazdeliti črte čez križno os

The align-content lastnost poravna otroke vzdolž navpične osi. Določi lahko tudi razmik med elementi, ki so v več vrsticah.

Možnosti za lastnost align-content vključujejo:

align-content: flex-start | flex-end | središče | raztegniti | prostor-med | prostor okoli

Dodajte lastnost align-content v nadrejeni vsebnik flex. Lastnost align-content bo delovala samo, če je nastavljena lastnost flex-wrap. Dodajte flex-wrap: zavijte v nadrejeni vsebnik in zmanjšajte širino nadrejenega diva, da vsilite elemente v več kot eno vrstico.

.parent {
 flex-wrap: zaviti;
 zaslon: flex;
 align-content: flex-start;
 širina: 180px;
}

Oglejte si kodo za lastnost align-content v tem Odrezek CodePen videti nekaj primerov.

Kako poravnati elemente na glavni osi

The opraviči vsebino lastnost doda desno, levo ali sredinsko poravnavo podrejenim elementom. Prav tako razporedi elemente z dodajanjem presledkov med njimi pri utemeljevanju vsebine.

Možnosti za lastnost justify-content vključujejo:

justify-content: flex-start | flex-end | središče | prostor-med | prostor okoli | prostorsko enakomerno

Zavijte elemente, ki jih želite poravnati, pod nadrejeno fleksibilno posodo.

HTML:

CSS:

.red {barva ozadja: rdeča; }
.green {barva ozadja: svetlozelena; }
.blue {barva ozadja: modra; }

Dodajte lastnost justify-content v nadrejeni vsebnik flex.

.parent {
 širina: 300px;
 zaslon: flex; 
 justify-content: flex-start;
}

Lastnost justify-content podpira tudi vrednosti, navedene v specifikaciji poravnave polja CSS. To vključuje vrednosti, kot so "začetek", "konec", "levo" in "desno". Nekateri brskalniki tega ne podpirajo.

Lastnost justify-content ima tudi ključno besedo "safe", ki jo lahko uporabite. To zagotavlja, da poskušajo elementi ostati v obsegu nadrejenega vsebnika.

Uporablja se tudi za preprečevanje izgube podatkov, če postavite dolgo besedo na sredino. Uporaba ključne besede safe prepreči, da bi krajši div odrezal prvo in zadnjo črko.

.parent {
 zaslon: flex; 
 justify-content: varno središče;
}

Varna ključna beseda je tudi omejena na nekatere brskalnike. Združljivost lahko preverite na Ali lahko uporabim.

Oglejte si kodo za lastnost justify-content v tem Odrezek CodePen videti nekaj primerov.

Kako dodati razmik med elementi

The vrzel lastnost vam omogoča, da dodate količino prostora med elementi. To je eden od novejše funkcije CSS, ki vam lahko pomagajo zgraditi odzivno postavitev.

Uporabite lastnost vrzeli na nadrejeni flex vsebnik.

.parent {
 zaslon: flex;
 razmik: 70px;
}

Če dodate vrzel, zaradi katere dolžina elementov preseže širino nadrejenega, se bodo elementi skrčili, da bi se poskušali prilegati znotraj vrstice.

.parent { 
 širina: 300px;
 razmik: 120px;
}

Če uporabite flex-wrap: wrap, da potisnete elemente v novo vrstico, bo količina vrzeli veljala tudi za prostor med vrsticami.

.parent { 
 širina: 300px;
 flex-wrap: zaviti;
 razmik: 120px;
}

Poleg tega lahko nastavite tudi vrzel med vrsticami in vrzel v stolpcu lastnosti. Ponovno jih boste morali uporabiti za nadrejeni vsebnik flex.

Lastnost razmika med vrsticami določa prostor med vsako vrstico. Lastnost column-gap določa prostor med vsakim stolpcem.

.parent { 
 razmik med vrsticami: 120 slikovnih pik; 
}
.parent { 
 razmik med stolpci: 120 slikovnih pik; 
}

Oglejte si kodo za lastnost vrzeli v tem Odrezek CodePen videti nekaj primerov.

Uporaba več lastnosti Flex na vašem spletnem mestu

Upajmo, da ste zdaj seznanjeni z različnimi lastnostmi flex, ki jih lahko uporabite za poravnavo elementov na vaši spletni strani. To vključuje, kako lahko uporabite lastnosti flex-direction, justify-content, align-self, align-items, align-content in gap.

Flexbox je zmogljiva tehnika postavitve, vendar je le majhen del CSS. Izvedete lahko tudi o novih lastnostih CSS, tehnikah čistega kodiranja in orodjih, ki se uporabljajo za optimizacijo CSS.

11 uporabnih orodij za preverjanje, čiščenje in optimizacijo datotek CSS

Preberite Naprej

O avtorju