El CSS Flexbox és un model de disseny que permet crear dissenys complexos i flexibles de manera senzilla i eficient. És especialment útil per a dissenys responsius, ja que facilita l'alineació i distribució dels elements dins d'un contenidor, independentment de la seva mida.
Conceptes Clau de Flexbox
- Contenidor Flex: L'element que conté els elements flexibles. Es defineix establint la propietat
display
aflex
oinline-flex
. - Elements Flex: Els elements fills directes del contenidor flex. Aquests elements es distribueixen i alineen dins del contenidor segons les propietats de Flexbox.
Propietats del Contenidor Flex
- display: Defineix el contenidor com a flex. Exemple:
display: flex;
. - flex-direction: Defineix la direcció dels elements flexibles dins del contenidor. Valors comuns:
row
: Els elements es disposen en fila (horitzontalment).column
: Els elements es disposen en columna (verticalment).
- justify-content: Alinea els elements flexibles al llarg de l'eix principal. Valors comuns:
flex-start
: Alinea els elements al començament.center
: Alinea els elements al centre.space-between
: Distribueix els elements amb espai entre ells.
- align-items: Alinea els elements flexibles al llarg de l'eix transversal. Valors comuns:
flex-start
: Alinea els elements al començament de l'eix transversal.center
: Alinea els elements al centre de l'eix transversal.stretch
: Estira els elements per omplir el contenidor.
Propietats dels Elements Flex
- flex-grow: Defineix la capacitat d'un element per créixer respecte als altres elements flexibles. Exemple:
flex-grow: 1;
. - flex-shrink: Defineix la capacitat d'un element per reduir-se respecte als altres elements flexibles. Exemple:
flex-shrink: 1;
. - flex-basis: Defineix la mida inicial d'un element abans que l'espai extra es distribueixi. Exemple:
flex-basis: 100px;
.
Exemple Pràctic
A continuació, es mostra un exemple pràctic d'ús de Flexbox:
<!DOCTYPE html> <html lang="ca"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Exemple de Flexbox</title> <style> .contenidor { display: flex; flex-direction: row; justify-content: space-between; align-items: center; height: 200px; border: 1px solid #ccc; } .element { background-color: #f0f0f0; padding: 20px; margin: 10px; flex-grow: 1; } </style> </head> <body> <div class="contenidor"> <div class="element">Element 1</div> <div class="element">Element 2</div> <div class="element">Element 3</div> </div> </body> </html>
Explicació del Codi
- Contenidor: El
div
amb la classecontenidor
és el contenidor flex. Té les propietatsdisplay: flex;
,flex-direction: row;
,justify-content: space-between;
ialign-items: center;
, que distribueixen els elements en fila, amb espai entre ells i centrats verticalment. - Elements: Els
div
amb la classeelement
són els elements flexibles. Tenen la propietatflex-grow: 1;
, que permet que cada element creixi per omplir l'espai disponible de manera equitativa.
Exercici Pràctic
Exercici: Crea un disseny utilitzant Flexbox on els elements es disposin en columna i estiguin centrats tant horitzontalment com verticalment dins del contenidor.
Solució:
<!DOCTYPE html> <html lang="ca"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Exercici de Flexbox</title> <style> .contenidor { display: flex; flex-direction: column; justify-content: center; align-items: center; height: 300px; border: 1px solid #ccc; } .element { background-color: #e0e0e0; padding: 15px; margin: 5px; } </style> </head> <body> <div class="contenidor"> <div class="element">Element A</div> <div class="element">Element B</div> <div class="element">Element C</div> </div> </body> </html>
Explicació de la Solució
- Contenidor: El
div
amb la classecontenidor
utilitzaflex-direction: column;
per disposar els elements en columna. Les propietatsjustify-content: center;
ialign-items: center;
centren els elements tant horitzontalment com verticalment.
Conclusió
El CSS Flexbox és una eina poderosa per crear dissenys responsius i flexibles. Amb les seves propietats, pots controlar fàcilment la distribució, alineació i mida dels elements dins d'un contenidor. Practicar amb Flexbox et permetrà crear dissenys més eficients i adaptables a diferents mides de pantalla. En el següent tema, explorarem el Disseny de Graella CSS, que complementa les capacitats de Flexbox per a dissenys més complexos.
Curs de Disseny Responsive
Mòdul 1: Introducció al Disseny Responsive
- Què és el Disseny Responsive?
- Història i Importància del Disseny Responsive
- Principis Bàsics del Disseny Responsive
Mòdul 2: Fonaments d'HTML i CSS
Mòdul 3: Media Queries
- Comprensió de les Media Queries
- Ús de les Media Queries en CSS
- Punts de Trencament i Dissenys Responsius