Ce face display: flex
Declarația display: flex activează modulul Flexbox pe un container. În acel moment, toți copiii săi direcți (flex items) se aliniază automat pe orizontală (unul lângă altul), în loc să cadă pe rânduri separate.
Flexbox este conceput pentru layout-uri unidimensionale: rânduri sau coloane. Rezolvă cu ușurință probleme istorice complicate din CSS: alinierea verticală, distribuirea egală a spațiului rămas și reordonarea vizuală a elementelor fără modificarea codului HTML.
Valori uzuale
| Valoare | Descriere |
|---|---|
flex |
Activează containerul flex la nivel de bloc. |
inline-flex |
Activează containerul flex, dar păstrează containerul în linie cu textul exterior. |
Exemple
Exemplul 1: Centrarea perfectă pe ambele axe (orizontală și verticală)
Cea mai simplă și robustă metodă de centrare din istoria CSS.
.caseta-centrata {
display: flex;
justify-content: center; /* orizontal */
align-items: center; /* vertical */
height: 300px;
background-color: #f1f5f9;
}Efect vizual în browser
Orice element din interior este așezat cu precizie matematică fix în mijlocul cutiei de 300px înălțime.Greșeli frecvente
- Așteptarea ca proprietățile Flexbox să se aplice nepoților; proprietățile flex acționează doar asupra copiilor direcți ai containerului.
Comenzi înrudite
flex-direction: Stabilește axa principală pe care sunt așezate elementele: pe rând (orizontal) sau pe coloană (vertical).justify-content: Distribuie elementele și spațiul liber de-a lungul axei principale (orizontal când flex-direction este row).align-items: Aliniază elementele de-a lungul axei secundare / transversale (vertical când flex-direction este row).gap (row-gap, column-gap): Setează distanța dintre elementele copil dintr-un container Flexbox sau Grid, fără a adăuga spațiu la margini.