3.5. Flexbox

El mòdul Flexbox Layout (o Flexible Box) és un sistema de disseny modern que permet distribuir, alinear i redimensionar elements d’una manera molt més flexible que el CSS tradicional.

Flexbox resol problemes típics del disseny web:

  • alineacions difícils
  • repartiment d’espais desiguals
  • centrat vertical
  • columnes que s’adapten automàticament
  • layouts que responen a pantalles de diferents mides

A diferència dels layouts clàssics:

  • els elements block s’organitzen verticalment,
  • els elements inline s’organitzen horitzontalment,

Flexbox no està lligat a cap direcció fixa: decideixes l’orientació i els elements s’adapten.

Flexbox és ideal per a dissenyar components i layouts de mida mitjana. Per a dissenys més grans, utilitzarem CSS Grid.

1. Conceptes bàsics de FlexBox

Per utilitzar Flexbox, un element ha de convertir-se en contenidor flex:

.container {
  display: flex;
}

A partir d’este moment:

  • aquest element és un flex container
  • els seus fills directes són flex items

1.1 Els eixos de Flexbox

Flexbox funciona amb dos eixos:

alt text

  • Main Axis (eix principal)

És l’eix on Flexbox col·loca els elements. La seua direcció depén de flex-direction.

  • Cross Axis (eix transversal)

És perpendicular al main axis i s’utilitza per a alineacions verticals o horitzontals, segons el cas.

Altres conceptes del model Flexbox

Per entendre com Flexbox calcula l’espai i organitza els elements, convé conéixer estes idees:

  • main-start → main-end

És el recorregut del flux principal. Els elements Flex es col·loquen començant en main-start i avançant cap a main-end.

  • Main Size

És la mida principal d’un element Flex. Pot ser amplària o alçària segons flex-direction. Equival a width o height, segons el cas.

  • cross-start → cross-end

Quan hi ha diverses línies Flex (amb flex-wrap), aquestes s’ordenen des de cross-start fins a cross-end.

  • Cross Size

És la mida transversal d’un element Flex: la que correspon a l’eix perpendicular. També equival a width o height segons l’orientació del contenidor.

Com es disposen els elements?

Els elements flexibles es distribueixen seguint estes regles:

  • Main Axis: Els elements es col·loquen des de main-start fins a main-end.
  • Cross Axis: Si hi ha diverses línies flexibles, estes s’organitzen des de cross-start fins a cross-end.

2. Propietats del Contenidor Flex

Aquestes propietats modifiquen el comportament general dels elements (els flex items).

2.1 flex-direction — Direcció dels elements

alt text

Defineix com s’ordenen els elements:

.container {
  flex-direction: row | row-reverse | column | column-reverse;
}
  • row (per defecte): horitzontal, d’esquerra a dreta
  • row-reverse: horitzontal invertida
  • column: vertical, de dalt cap avall
  • column-reverse: vertical invertida

Demostració flex-direction

2.2 flex-wrap — Permet trencar línia

alt text

Per defecte, Flexbox posa tots els elements en una sola línia. Amb esta propietat es pot permetre que els elements es dividisquen en múltiples línies si cal.

.container {
  flex-wrap: nowrap | wrap | wrap-reverse;
}
  • nowrap (per defecte): Tots els elements flex estaran en una sola línia.
  • wrap: Els elements flex es dividiran en diverses línies, de dalt a baix.
  • wrap-reverse: Els elements flex es dividiran en diverses línies, de baix a dalt.

Demostració flex-wrap

2.3 flex-flow — Abreviatura

Combinació de flex-direction i flex-wrap:

flex-flow: <direcció> <wrap>;

Exemple:

flex-flow: row wrap;

Demostració flex-flow

2.4 justify-content — Alineació horitzontal (eix principal)

alt text

Organitza espais i distribució en el main axis:

  • flex-start (per defecte): Els elements es col·loquen al començament de la direcció flex.
  • flex-end: Els elements es col·loquen al final de la direcció flex.
  • center: Els elements s’alineen al centre de la línia.
  • space-between: Els elements es distribueixen equitativament; el primer està al començament i l’últim al final.
  • space-around: Els elements tenen espai igual al seu voltant.
  • space-evenly: L’espai entre qualsevol dos elements (i les vores) és igual.

Demostració justify-content

2.5 align-items — Alineació en el Cross Axis

alt text

Controla l’alineació perpendicular al main axis, es a dir, en el cross axis. És similar a justify-content, però per a l’eix transversal o vertical.

  • stretch (per defecte): Els elements s’estiren per omplir el contenidor (respectant min-width/max-width).
  • flex-start / start / self-start: Els elements s’alineen al començament de l’eix transversal.
  • flex-end / end / self-end: Els elements s’alineen al final de l’eix transversal.
  • center: Els elements s’alineen al centre de l’eix transversal.
  • baseline: Els elements s’alineen perquè les seues línies base coincidisquen.

Demostració align-items

2.6 align-content — Alineació de múltiples línies

alt text

Només afecta contenidors amb wrap.

Valors:

  • normal (per defecte): Els elements s’agrupen en la seua posició per defecte.
  • flex-start / start: Les línies es col·loquen al començament del contenidor.
  • flex-end / end: Les línies es col·loquen al final del contenidor.
  • center: Les línies s’alineen al centre del contenidor.
  • space-between: Les línies es distribueixen equitativament; la primera línia al començament i l’última al final.
  • space-around: Espai igual al voltant de cada línia.
  • space-evenly: Espai igual entre línies i les vores.
  • stretch: Les línies s’estiren per ocupar l’espai restant.

Demostració align-content

Important:

  • align-items s’aplica als items de cada línia, és a dir, a l’interior d’una línia.
  • align-content s’aplica a totes les línies juntes, però només funciona quan hi ha wrap i espai vertical sobr ant.

2.7 gap — Espai entre elements

La propietat gap controla l’espai entre els elements flexibles. Només aplica este espai entre elements, no a les vores exteriors

alt text

Equivalent al gap de CSS Grid.

gap: 10px;        /* mateix valor per a files i columnes */
gap: 10px 20px;   /* files / columnes */

Nota: gap no és exclusiu de flexbox; també funciona amb Grid i dissenys de columnes múltiples.

Demostració gap

3. Propietats dels Elements Flex (flex items)

Aquestes propietats es posen en els fills del contenidor flex.

alt text

3.1 order — Reordenar visualment

Per defecte, els elements flexibles es disposen segons l’ordre en el codi font. No obstant això, la propietat order controla l’ordre en què apareixen dins del contenidor flex

alt text

No canvia el codi HTML, només la posició visual.

.item {
  order: 5; /* el valor per defecte és 0 */
}

Els valors d’order són números que indiquen prioritat visual (menor → abans). No representen una posició, sinó un pes:

  • order: 0 (per defecte)
  • order: 1 apareix després

  • order: -1 apareix abans

    Els elements amb el mateix valor mantenen l’ordre natural de l’HTML.

Demostració order

3.2 flex-grow — Capacitat de créixer

alt text

Reparteix proporcionalment l’espai disponible dins del contenidor entre els elements flexibles segons el seu valor de creixement (flex-grow).

.a { flex-grow: 1; }
.b { flex-grow: 2; }  /* creix el doble que .a */

Demostració flex-grow

3.3 flex-shrink — Capacitat de contraure’s

Determina com es redueix un element quan hi ha poc espai.

  • 1 → es pot contraure (per defecte)
  • 0 → no es contraurà

flex-shrink determina la proporció de reducció quan el contenidor és massa xicotet. Per exemple:

  • shrink: 2 es contraurà el doble que shrink: 1.
  • Si un element té shrink: 0, no es redueix mai (pot desbordar el contenidor).

Demostració flex-shrink

3.4 flex-basis — Mida inicial

Defineix la mida base d’un item abans de repartir espais.

.a { flex-basis: 100px; }
.b { flex-basis: 20%; }

flex-basis té prioritat sobre width (quan existeixen ambdós).

Demostració flex-basis

3.5 flex — Abreviatura recomanada

Equival a:

flex: <grow> <shrink> <basis>;

Exemple:

flex: 1;           /* grow=1, shrink=1, basis=0 */
flex: 2 1 100px;   /* grow=2, shrink=1, basis=100px */
flex: none;        /* 0 0 auto */

Demostració flex

En resum

  • flex-basis: Defineix la mida inicial de l’element abans de distribuir l’espai.
  • flex: Permet establir de manera conjunta el comportament de creixement, contracció i mida inicial. Ideal per simplificar el codi.

Consell: És recomanable utilitzar esta propietat abreujada en lloc de definir cadascuna individualment, ja que assigna els altres valors de manera intel·ligent.

3.6 align-self — Alineació individual

alt text

Permet que un element es comporte diferent als altres, es a dir, sobreescriu la propietat align-items del contenidor per a un element específic.

.item {
  align-self: flex-end;
}

Demostració align-self

Resum

Contenidor

  • display:flex activa Flexbox.
  • flex-direction decideix l’orientació.
  • flex-wrap permet que els elements salten de línia.
  • justify-content → organitza al llarg del main axis.
  • align-items → alineació en el cross axis.
  • gap → espai entre elements.

Elements

  • order → canvia posició visual.
  • flex-grow → com creix.
  • flex-shrink → com es contraurà.
  • flex-basis → mida inicial.
  • flex → configuració completa abreujada.
  • align-self → alineació individual.

Amb flex-grow, flex-shrink i flex-basis definim si un element és flexible o fix. El conjunt determina com es comporta quan sobre o falta espai

Taules Resum Flexbox

1. Propietats del contenidor (Flex Container)

Propietat Què fa Valors principals Explicació breu
display Activa Flexbox flex Converteix l’element en contenidor flex.
flex-direction Direcció del main axis row · row-reverse · column · column-reverse Controla si els elements van en fila o columna i el sentit.
flex-wrap Salt de línia nowrap · wrap · wrap-reverse Permet dividir els elements en diverses línies.
flex-flow Abreviatura <direction> <wrap> Combina flex-direction i flex-wrap en una sola línia.
justify-content Alineació en el main axis flex-start · flex-end · center · space-between · space-around · space-evenly Distribueix els elements horitzontalment (o segons l’eix principal).
align-items Alineació en el cross axis stretch · flex-start · flex-end · center · baseline Alinea els elements dins de cada línia.
align-content Alineació de múltiples línies stretch · flex-start · flex-end · center · space-between · space-around · space-evenly Només funciona amb wrap i diverses línies; distribueix les línies.
gap Espai entre elements gap: X · gap: X Y Controla l’espai entre els items (no les vores).

2. Propietats dels elements (Flex Items)

Propietat Què fa Valors Explicació breu
order Reordena visualment 0 (defecte), números positius o negatius Un nombre menor apareix abans. No canvia l’HTML.
flex-grow Creixement 0 (defecte) · 1 · 2… Determina quant espai extra ocupa un item respecte als altres.
flex-shrink Contracció 1 (defecte) · 0 · 2… Controla quant es redueix un element quan falta espai.
flex-basis Mida inicial auto · px · % Mida base de l’element abans de distribuir espai. Prioritza front a width.
flex Abreviatura <grow> <shrink> <basis> Recomanat per definir el comportament complet d’un item.
align-self Alineació individual auto · flex-start · flex-end · center · baseline · stretch Sobreescriu align-items per a un item concret.

3. Resum dels eixos

Eix Direcció Controlat per Explica
Main Axis Principal (fila o columna) flex-direction Determina com es col·loquen els elements.
Cross Axis Perpendicular al main axis align-items · align-content Controla alineació vertical/horizontal segons el cas.

4. Resum funcional

Acció que vull fer Propietat que utilitze Exemple
Posar els elements en fila o columna flex-direction flex-direction: column;
Permetre que els elements salten a la línia següent flex-wrap flex-wrap: wrap;
Alinear horitzontalment (main axis) justify-content justify-content: center;
Alinear verticalment (cross axis) align-items align-items: flex-end;
Distribuir diverses línies align-content align-content: space-between;
Posar espai entre elements gap gap: 10px;
Reordenar visualment order order: -1;
Fer que un element ocupe més espai flex-grow flex-grow: 3;
Evitar que un element es reduïsca flex-shrink flex-shrink: 0;
Donar una mida base flex-basis flex-basis: 200px;
Establir grow + shrink + basis flex flex: 1 0 150px;
Alinear només un item align-self align-self: center;