Cum să utilizați Flex pentru a alinia elementele HTML

Proprietățile flexibile din CSS vă permit să aliniați elementele mai flexibil și mai receptiv. Acest lucru îl face util atunci când doriți ca elementele dvs. HTML să fie mai receptive în browserul web.

Acest articol va descrie cum puteți utiliza anumite proprietăți flexibile. Aceasta include proprietățile flex-direction, justify-content, align-self, align-items, align-content și proprietățile gap.

Cum se configurează CSS Flex Display

Un exemplu de structură pe care îl puteți folosi pentru a explora elementele de bază ale flexbox este un set de div-uri copil sub un singur div părinte. În codul de mai jos, există un div principal „părinte”. Cele trei div copii reprezintă elemente pe care le puteți alinia folosind proprietăți flexibile.

Pentru ca orice stil flex să funcționeze, va trebui să adăugați display: flex proprietate către containerul flex părinte.

.părinte {
 display: flex;
}

Fără flex, div-urile copil se afișează unul după altul într-o formațiune de coloană în jos pe pagină.

Pentru a vedea un exemplu al acestei setări, vizualizați și rulați codul din acesta Fragment CodePen.

Cum să controlezi direcția aspectului

The flex-direcție proprietatea determină direcția rândului sau coloanei elementelor copil.

Opțiunile pentru proprietatea flex-direction includ:

flex-direcție: rând | coloana | rând-invers | coloană-invers

Va trebui să adăugați un container părinte în jurul elementelor pe care doriți să le aliniați.

HTML:

CSS:

.red { background-color: red; }
.orange { background-color: orange; }
.galben { culoare de fundal: galben; }
.verde { culoarea de fundal: verde;}
.blue { background-color: blue; }
.purple { background-color: purple; }
.parent div {
 latime: 40px;
 înălțime: 40px;
}

Aplicați proprietatea flex-direction containerului flex părinte. Acest lucru va alinia elementele div copil.

.părinte {
 latime: 300px;
 display: flex; 
 flex-direcție: rând;
}

Multe proprietăți flexibile se referă la conceptul de axă principală și axa transversală. Când flex-direcția este rând, axa principală reprezintă direcția orizontală, iar axa transversală reprezintă verticala. O valoare a coloanei schimbă aceste axe.

Vedeți codul pentru proprietatea flex-direction în acest articol Fragment CodePen sa vezi cateva exemple.

Cum să aliniați elementele de-a lungul axei transversale

The alinierea elementelor proprietatea controlează alinierea elementelor de-a lungul axei transversale. Pentru direcția de flexibilitate implicită, rândul, elementele de aliniere controlează alinierea verticală a elementelor.

Opțiunile pentru proprietatea align-items includ:

alinierea elementelor: flex-start | flex-end | elemente-aliniere | întinde

Adăugați proprietatea align-items la containerul părinte pentru a-și alinia copiii.

.părinte {
 display: flex; 
 align-items: flex-start;
}

În plus, puteți alege să aliniați elementele folosind o linie de bază. În mod implicit, opțiunea de bază aliniază toate elementele pe baza elementelor.

De asemenea, puteți alege de unde începe linia de bază, cum ar fi partea de sus (prima linie de bază) sau de jos (ultima linie de bază).

elemente de aliniere: linie de bază | prima linie de bază | ultima linie de bază;

Pentru alinierea elementelor: linia de bază pentru a funcționa, asigurați-vă că fiecare articol are o înălțime sau lățime diferită (în funcție de axa pe care o utilizați).

​​​

Vedeți codul pentru proprietatea align-items în aceasta Fragment CodePen sa vezi cateva exemple.

Cum să înlocuiți alinierea pe articole individuale

Puteți folosi alinierea-sine proprietate pentru a suprascrie orice stil al elementelor de aliniere a containerului părinte. Aceasta înseamnă că puteți seta o aliniere flexibilă separată pentru un articol individual.

Opțiunile pentru proprietatea align-self includ:

align-self: auto | flex-start | flex-end | centru | linie de bază | întinde

Să spunem, de exemplu, că containerul părinte are un stil de direcție flexibilă setat la „rând”.

.părinte {
 display: flex; 
 flex-direcție: rând;
}

Puteți aplica proprietatea align-self pe elementul individual. Articolul individual va folosi stilul proprietății align-self și va centra articolul peste containerul părinte.

Vedeți codul pentru proprietatea align-self în acest Fragment CodePen sa vezi cateva exemple.

Cum să distribuiți liniile pe axa transversală

The alinierea-conținut proprietatea aliniază copiii de-a lungul axei verticale. De asemenea, poate determina distanța dintre elementele care se află pe mai multe linii.

Opțiunile pentru proprietatea align-content includ:

align-content: flex-start | flex-end | centru | intindere | spatiu-intre | spatiu-in jur

Adăugați proprietatea align-content în containerul flex părinte. Proprietatea align-content va funcționa numai dacă proprietatea flex-wrap este setată. Adăugați flex-wrap: înfășurați în containerul părinte și reduceți lățimea div-ului părinte pentru a forța articolele pe mai mult de o linie.

.părinte {
 flex-wrap: wrap;
 display: flex;
 align-content: flex-start;
 latime: 180px;
}

Vedeți codul pentru proprietatea align-content în aceasta Fragment CodePen sa vezi cateva exemple.

Cum să aliniați elementele pe axa principală

The justificare-conținut proprietatea adaugă alinierea la dreapta, la stânga sau la centru elementelor secundare. De asemenea, distribuie elementele adăugând spații între ele atunci când justifică conținutul.

Opțiunile pentru proprietatea justify-content includ:

justify-content: flex-start | flex-end | centru | spatiu-intre | spatiu-in jur | spațiu-uniform

Înfășurați articolele pe care doriți să le aliniați sub un container flexibil părinte.

HTML:

CSS:

.red { background-color: red; }
.green { background-color: lightgreen; }
.blue { background-color: blue; }

Adăugați proprietatea justify-content în containerul flex părinte.

.părinte {
 latime: 300px;
 display: flex; 
 justify-content: flex-start;
}

Proprietatea justify-content acceptă și valorile enumerate în specificația CSS Box Alignment. Acestea includ valori precum „start”, „end”, „left” și „right”. Unele browsere nu acceptă acestea.

Proprietatea justify-content are și un cuvânt cheie „sigur” pe care îl puteți utiliza. Acest lucru asigură că elementele încearcă să rămână în raza containerului părinte.

De asemenea, este folosit pentru a preveni pierderea datelor, în cazul în care centrați un cuvânt lung. Folosirea cuvântului cheie safe împiedică un div mai scurt să taie prima și ultima literă.

.părinte {
 display: flex; 
 justificare-conținut: centru sigur;
}

Cuvântul cheie sigur este, de asemenea, limitat la anumite browsere. Puteți verifica compatibilitatea la Pot folosi.

Vizualizați codul pentru proprietatea justify-content din aceasta Fragment CodePen sa vezi cateva exemple.

Cum să adăugați spațiere între articole

The decalaj proprietate vă permite să adăugați o cantitate de spațiu între articole. Este unul dintre funcții CSS mai noi care vă pot ajuta să construiți un aspect receptiv.

Aplicați proprietatea gap containerului flex părinte.

.părinte {
 display: flex;
 decalaj: 70px;
}

Dacă adăugați un decalaj care forțează lungimea elementelor să depășească lățimea părintelui, elementele se vor micșora pentru a încerca să se potrivească în interiorul rândului.

.părinte { 
 latime: 300px;
 decalaj: 120px;
}

Dacă utilizați flex-wrap: wrap pentru a împinge articolele pe o nouă linie, valoarea decalajului se va aplica și spațiului dintre rânduri.

.părinte { 
 latime: 300px;
 flex-wrap: wrap;
 decalaj: 120px;
}

În plus, puteți seta și rând-decalaj și coloane-decalaj proprietăți. Din nou, va trebui să le aplicați pe containerul flex părinte.

Proprietatea row-gap determină spațiul dintre fiecare rând. Proprietatea column-gap determină spațiul dintre fiecare coloană.

.părinte { 
 interval de rând: 120px; 
}
.părinte { 
 coloană-decalaj: 120px; 
}

Vizualizați codul pentru proprietatea gap în aceasta Fragment CodePen sa vezi cateva exemple.

Utilizarea mai multor proprietăți Flex pe site-ul dvs. web

Sperăm că acum sunteți familiarizat cu diferitele proprietăți flexibile pe care le puteți utiliza pentru a alinia elementele de pe pagina dvs. web. Aceasta include modul în care puteți utiliza proprietățile flex-direction, justify-content, align-self, align-items, align-content și gap.

Flexbox este o tehnică puternică de aspect, dar este doar o mică parte a CSS. De asemenea, puteți afla despre noile proprietăți CSS, tehnici de codare curate și instrumente utilizate pentru optimizarea CSS.

11 instrumente utile pentru a verifica, curăța și optimiza fișierele CSS

Citiți în continuare

Despre autor