El model Flexbox de CSS és una de les eines més potents per crear dissenys web adaptables i ordenats sense necessitat de calcular mides exactes o flotar elements. Amb la propietat display: flex podem controlar com es distribueixen els elements dins d’un contenidor.
Funcionament de flexbox
Quan apliquem display: flex a un element contenidor, tots els seus elements fills es converteixen automàticament en “flex items”. Això ens permet alinear-los i distribuir-los fàcilment a l’espai disponible.
.container {
display: flex;
}
.item {
background: lightblue;
padding: 10px;
margin: 5px;
}
En aquest exemple, els elements dins de la classe .container s’alinearan en una sola línia, un al costat de l’altre, de forma automàtica.
Direcció i alineació
La propietat flex-direction defineix si els elements s’organitzen en fila (row), columna (column) o altres variants.
.container {
display: flex;
flex-direction: column;
/* Col·loca els elements en columna */
}
A més, podem alinear els elements horitzontalment i verticalment amb justify-content i align-items:
.container {
display: flex;
justify-content: space-between; /* Espai entre els elements */
align-items: center; /* Centra verticalment */
}
Adaptabilitat i distribució
Els elements flexibles poden créixer o reduir-se segons l’espai disponible gràcies a la propietat flex. Aquesta combina tres valors: flex-grow, flex-shrink i flex-basis.
.item {
flex: 1; /* Cada element ocuparà el mateix espai */
}
Això fa que els elements s’ajustin automàticament dins del contenidor sense trencar el disseny, ideal per a estructures responsive.
Exemple complet
<div class="container">
<div class="item">Bloc 1</div>
<div class="item">Bloc 2</div>
<div class="item">Bloc 3</div>
</div>
.container {
display: flex;
justify-content: space-around;
align-items: center;
height: 200px;
background-color: #f2f2f2;
}
.item {
background-color: #8ecae6;
padding: 20px;
border-radius: 8px;
}
En aquest cas, els tres blocs es distribuiran uniformement i es centraran verticalment dins del contenidor. Un exemple senzill però molt potent!
Conclusió
Flexbox simplifica molt la creació de dissenys web adaptables i nets. Amb només unes poques línies de codi, pots controlar fàcilment la distribució, alineació i mida dels teus elements. Si encara no l’has provat, és hora de fer-ho!
