Kako koristiti Flex za poravnavanje HTML elemenata

Svojstva fleksibilnosti u CSS-u omogućuju vam da fleksibilnije i brže poravnate stavke. To ga čini korisnim kada želite da vaši HTML elementi budu osjetljiviji unutar web preglednika.

Ovaj članak će proći kroz kako možete koristiti određena svojstva flex-a. To uključuje svojstva flex-direction, justify-content, align-self, align-items, align-content i gap.

Kako postaviti CSS Flex Display

Primjer strukture koju možete koristiti za istraživanje osnove flexboxa je skup podređenih divova ispod jednog nadređenog diva. U kodu ispod nalazi se glavni "roditeljski" div. Tri podređena diva predstavljaju stavke koje možete poravnati pomoću flex svojstava.

Da bi bilo koji flex styling funkcionirao, morat ćete dodati zaslon: flex svojstvo na roditeljski flex kontejner.

.roditelj {
 zaslon: flex;
}

Bez flex-a, podređeni divovi se prikazuju jedan za drugim u formaciji stupaca niz stranicu.

Da biste vidjeli primjer ovog postavljanja, pogledajte i pokrenite kod u ovome CodePen isječak.

Kako kontrolirati smjer izgleda

The flex-direction svojstvo određuje smjer retka ili stupca podređenih stavki.

Opcije za svojstvo flex-direction uključuju:

flex-direction: red | stupac | red-obrnuti | stupac-revers

Morat ćete dodati roditeljski spremnik koji okružuje stavke koje želite poravnati.

HTML:

CSS:

.red { boja pozadine: crvena; }
.orange { background-color: narančasta; }
.yellow { background-color: yellow; }
.green { background-color: green;}
.blue { background-color: blue; }
.purple { background-color: ljubičasta; }
.parent div {
 širina: 40px;
 visina: 40px;
}

Primijenite svojstvo flex-direction na roditeljski flex spremnik. Ovo će poravnati podređene div stavke.

.roditelj {
 širina: 300px;
 zaslon: flex; 
 flex-direction: red;
}

Mnoga svojstva savitljivosti odnose se na koncept glavne osi i poprečne osi. Kada je flex-direction red, glavna os predstavlja horizontalni smjer, a poprečna os predstavlja okomitu. Vrijednost stupca mijenja ove osi.

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

Kako poravnati stavke duž poprečne osi

The align-items svojstvo kontrolira poravnavanje stavki duž poprečne osi. Za zadani flex-direction, row, align-items kontrolira okomito poravnanje stavki.

Opcije za svojstvo align-items uključuju:

align-items: flex-start | flex-end | poravnati stavke | rastegnuti

Dodajte svojstvo align-items roditeljskom spremniku da poravnate njegove podređene elemente.

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

Osim toga, možete odabrati poravnavanje stavki pomoću osnovne linije. Prema zadanim postavkama, osnovna opcija poravnava sve stavke na temelju baze stavki.

Također možete odabrati odakle počinje osnovna crta, kao što je vrh (prva osnovna crta) ili dno (posljednja osnovna linija).

align-items: osnovna linija | prva osnovna linija | posljednja osnovna linija;

Za poravnanje stavki: osnovna linija za rad, provjerite ima li svaka stavka različitu visinu ili širinu (ovisno o osi koju koristite).

​​​

Pogledajte kod za svojstvo align-items u ovome CodePen isječak vidjeti neke primjere.

Kako nadjačati poravnanje na pojedinačnim stavkama

Možete koristiti poravnati-sebe svojstvo za nadjačavanje bilo kojeg stila stavki poravnanja roditeljskog spremnika. To znači da možete postaviti zasebno savitljivo poravnanje na pojedinačnu stavku.

Opcije za svojstvo align-self uključuju:

align-self: auto | flex-start | flex-end | centar | osnovna linija | rastegnuti

Recimo, na primjer, da roditeljski spremnik ima stil savijanja postavljen na "red".

.roditelj {
 zaslon: flex; 
 flex-direction: red;
}

Svojstvo align-self možete primijeniti na pojedinačnu stavku. Pojedinačna stavka koristit će stil svojstva align-self i centrirati će stavku preko nadređenog spremnika.

Pogledajte kod za svojstvo align-self u ovome CodePen isječak vidjeti neke primjere.

Kako rasporediti linije preko poprečne osi

The align-content svojstvo poravnava djecu duž okomite osi. Također može odrediti razmak između stavki koje se nalaze u više redaka.

Opcije za svojstvo align-content uključuju:

align-content: flex-start | flex-end | centar | rastegnuti | prostor-između | prostor-okolo

Dodajte svojstvo align-content roditeljskom flex spremniku. Svojstvo align-content radit će samo ako je postavljeno svojstvo flex-wrap. Dodajte flex-wrap: zamotajte u nadređeni spremnik i smanjite širinu roditeljskog diva kako biste stavke natjerali na više od jednog reda.

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

Pogledajte kod za svojstvo align-content u ovome CodePen isječak vidjeti neke primjere.

Kako poravnati stavke na glavnoj osi

The opravdati-sadržaj svojstvo dodaje desno, lijevo ili središnje poravnanje podređenim stavkama. Također širi stavke dodavanjem razmaka između njih kada opravdava sadržaj.

Opcije za svojstvo justify-content uključuju:

justify-content: flex-start | flex-end | centar | prostor-između | prostor-oko | prostorno ravnomjerno

Zamotajte stavke koje želite poravnati ispod roditeljskog flex spremnika.

HTML:

CSS:

.red { boja pozadine: crvena; }
.green { background-color: svijetlozelena; }
.blue { background-color: blue; }

Dodajte svojstvo justify-content roditeljskom flex spremniku.

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

Svojstvo justify-content također podržava vrijednosti navedene u specifikaciji CSS Box Alignment. To uključuje vrijednosti kao što su "početak", "kraj", "lijevo" i "desno". Neki preglednici to ne podržavaju.

Svojstvo justify-content također ima "sigurnu" ključnu riječ koju možete koristiti. To osigurava da elementi pokušavaju ostati unutar raspona roditeljskog spremnika.

Također se koristi za sprječavanje gubitka podataka u slučaju kada centrirate dugu riječ. Korištenje ključne riječi safe sprječava kraći div da odsiječe prvo i posljednje slovo.

.roditelj {
 zaslon: flex; 
 justify-content: sigurno središte;
}

Sigurna ključna riječ također je ograničena na određene preglednike. Kompatibilnost možete provjeriti na Mogu li koristiti.

Pogledajte kod za svojstvo justify-content u ovome CodePen isječak vidjeti neke primjere.

Kako dodati razmak između stavki

The jaz svojstvo vam omogućuje dodavanje količine razmaka između stavki. To je jedan od novije CSS značajke koje vam mogu pomoći da izgradite responzivni izgled.

Primijenite svojstvo razmaka na roditeljski flex spremnik.

.roditelj {
 zaslon: flex;
 razmak: 70px;
}

Ako dodate razmak koji prisiljava duljinu stavki premašiti širinu nadređenog, stavke će se smanjiti kako bi pokušale stati unutar retka.

.roditelj { 
 širina: 300px;
 razmak: 120px;
}

Ako koristite flex-wrap: wrap za guranje stavki u novi redak, količina praznine također će se primijeniti na razmak između redaka.

.roditelj { 
 širina: 300px;
 flex-wrap: omotati;
 razmak: 120px;
}

Osim toga, također možete postaviti razmak u redovima i stupac-razmak Svojstva. Opet, morat ćete ih primijeniti na roditeljski flex spremnik.

Svojstvo row-gap određuje razmak između svakog reda. Svojstvo column-gap određuje razmak između svakog stupca.

.roditelj { 
 razmak između redova: 120px; 
}
.roditelj { 
 razmak stupca: 120px; 
}

Pogledajte kod za svojstvo praznine u ovome CodePen isječak vidjeti neke primjere.

Korištenje više Flex svojstava na vašoj web-lokaciji

Nadamo se da ste sada upoznati s raznim svojstvima flex-a koja možete koristiti za poravnavanje stavki na svojoj web stranici. To uključuje kako možete koristiti svojstva flex-direction, justify-content, align-self, align-items, align-content i gap.

Flexbox je moćna tehnika izgleda, ali to je samo jedan mali dio CSS-a. Također možete naučiti o novim CSS svojstvima, tehnikama čistog kodiranja i alatima koji se koriste za CSS optimizaciju.

11 korisnih alata za provjeru, čišćenje i optimizaciju CSS datoteka

Pročitajte dalje

O autoru