Flexbox CSS

Flexbox este o tehnică de layout puternică în CSS care permite distribuirea eficientă a spațiului între elemente într-un container, chiar și atunci când dimensiunile acestora sunt necunoscute sau dinamice.

Cum funcționează Flexbox?

Flexbox folosește două elemente principale: un container flex și elementele flex din interiorul acestuia. Containerul flex controlează alinierea și distribuirea spațiului, iar elementele flex sunt dispuse într-un mod flexibil, respectând setările definite.

Proprietăți ale containerului flex

Pentru a crea un container flex, trebuie să adaugi display: flex; pe elementul părinte:

        
.container {
    display: flex;
}
        
    

Iată câteva proprietăți ale containerului flex:

• flex-direction: Definește direcția principală a containerului (orizontală sau verticală). Valori posibile: row, column, row-reverse, column-reverse.
• justify-content: Controlează alinierea elementelor pe axa principală (de exemplu, stânga-dreapta sau sus-jos). Valori posibile: flex-start, center, space-between, space-around.
• align-items: Controlează alinierea elementelor pe axa transversală (de exemplu, sus-jos pe un container orizontal). Valori posibile: flex-start, center, stretch.

Exemplu de Flexbox

Iată un exemplu simplu de Flexbox care aliniaza 3 elemente într-un container:

        
.container {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.item {
    background-color: #F8CFA4;
    padding: 10px;
    margin: 5px;
}
        
    

Flexbox în acțiune

În exemplul de mai sus, am folosit justify-content: space-between pentru a distribui spațiul uniform între elemente și align-items: center pentru a le alinia pe axa verticală.

Concluzie

Flexbox este un instrument foarte util pentru crearea layout-urilor responsive și flexibile. Învață să folosești aceste proprietăți pentru a crea pagini web moderne și ușor de utilizat.