Display flex – maquetació

Quan maquetem fent servir flex, hem de conéixer algunes propietats dels ítems flex:

• flex-grow
• flex-shrink
• flex-basis
• order
• align-self

La paraula flex fa referència a la flexibilitat dels ítems flex. Quan treballem amb flex, els elements són elàstics i poden encongir-se o expandir-se. Els valors d’amplada i alçada no sempre es respectaran, és important entendre això.

Igual que tenim un eix principal i un eix secundari, també tenim una mida secundària (la cross size) i una mida primària (la main size). Quan el flex-direction és row, la cross size és l’alçada, Quan la flex-direction és column, la cross size és l’amplada.

Aquest és el comportament de la dimensió secundària (cross-size):

• Si la flex-direction és «row» i hem definit una alçada d’un ítem flex, aquesta alçada es respectarà. Si la flex-direction és «column» i hem definit una amplada d’un ítem flex, aquesta amplada es respectarà.
• Si no s’ha definit la cross-size (alçada per flex-direction «row», amplada per flex-direction «column»), el navegador estirarà l’ítem per a colonitzar tot l’espai disponible (horitzontalment en la flex-column, verticalment en la flex-row)
• Si la propietat align-content o align-items té un valor diferent de stretch, les dimensions sera determinades per el contingut

En canvi, aquest és el comportament de la dimensió principal (main size):

• Si no s’ha definit la mida, es calcularà segons el contingut. Si la flex-direction és «row», els flex ítems ocuparan l’espai horitzontal necessari per a mostrar-ne el contingut. Si la flex-direction és «column», els flex ítems ocuparan l’espai vertical necessari per a mostrar-ne el contingut.
• Si s’ha definit la mida, aquesta podria respectar-se, encongir-se o créixer.

És important, doncs, entendre com es comportaran els elements en l’eix principal, com es modificarà la seva dimensió principal (main-size)

Els flex ítems ocuparan l’espai resultant de sumar la dimensió principal de tots els flex-items en l’eix principal, més els marges (si n’hi ha). Si la flex-direction és «row», aleshores els ítems ocuparan horitzontalment la suma de les seves amplades i marges. Aquest és l’espai ocupat.

L’espai disponible és la diferència entre la mida del contenidor i l’espai ocupat. Aquesta diferència pot ser un número positiu o negatiu.

Si l’espai disponible és negatiu (els ítems ocupen més espai del que n’hi ha), els flex ítems s’encongiran per tenir espai en una sola línia. Els marges, però, no es modificaran.

Com que les mides que definim són només un punt de partida, parlem de mida «base» o flex-basis. La propietat flex-basis defineix la mida de la qual partim abans de que s’apliquin els estiraments o encongiments necessaris.

Quan la flex-direction és «row», el flex-basis defineix el punt de partida de l’amplada. Quan la flex-direction és «column», el flex-basis defineix el punt de partida de l’alçada. Cal tenir en compte:

• L’amplada o alçada definida amb flex-basis sempre guanya per sobre de la definida amb les propietats width o height
• Si no definim el valor flex-basis, o si li donem el valor «auto», es tindrà en compte el valor de width o height, segons el cas (si és row o column).
• Si no es defineix un valor per flex-basis ni s’especifica l’amplada o l’alçada, les dimensions seran determinades per el contingut.

Aleshores, com es distribueix l’espai disponible? Aquí entren en joc les propietats flex-grow i flex-shrink.

Si l’espai disponible és un valor positiu, els ítems flex creixeran per colonitzar l’espai. Es repartiran l’espai segons allò especificat amb el valor flex-grow a cada ítem. Si tots els ítems tenen flex-grow igual a «1», aleshores l’espai es repartirà en parts iguals. Però si un dels ítems té un flex-grow igual a 2, aquest ítem rebrà el doble d’espai que els altres.

Exemple:

.container { 
width: 500px; 
} 
.item-1 { 
flex-basis: 100px ; 
flex-grow: 1 
} 
.item-2 { 
flex-basis: 100px ; 
flex-grow: 2 
} 
.item-3 { 
flex-basis: 100px ; 
flex-grow: 1 
} 
.item-4 { 
flex-basis: 100px ; 
flex-grow: 1
}

La suma de les amplades dels 4 ítems flex, farà 500px;

IMPORTANT: Si els ítems flex tinguessin marges, hauríem de sumar el seu espai al espai ocupat, i l’espai disponible seria menor.

.container { 
width: 500px; 
} 
.container > *{
margin:5px;
}
.item-1 { 
flex-basis: 100px ; 
flex-grow: 1 
} 
.item-2 { 
flex-basis: 100px ; 
flex-grow: 2 
} 
.item-3 { 
flex-basis: 100px ; 
flex-grow: 1 
} 
.item-4 { 
flex-basis: 100px ; 
flex-grow: 1
}

I què passa si l’espai disponible és un valor negatiu?

Quan l’espai no és suficient i els flex-items s’han d’encongir, ho faran en proporció al valor definit amb flex-shrink. Aquest valor funciona igual que flex-grow, però actua s’obre l’encongiment.

IMPORTANT: Un ítem sempre té una mida mínima determinada per el seu contingut. Podem forçar una mida mínima amb les propietats min-width i min-height.

Podem indicar el valor de flex-grow, flex-shrink i flex-basis en una sola línia, fent servir la propietat abreviada «flex». Per defecte, els flex ítems tenen el següent valor de la propietat flex:

flex: 0 1 auto;

Això signfica que:

• El valor per defecte de flex-grow és 0
• El valor per defecte de flex-shrink és 1
• El valor per defecte de flex-basis és auto (la mida ve determinada per el seu contingut)

Altres possibles valors de flex són:

• flex: auto;
  Equival a flex: 1 1 auto;
  Els ítems poden créixer o reduir-se segons sigui necessari. El flex-basis està determinat per el contingut de cada ítem.
• flex: none;
  Equivalent de flex: 0 0 auto;
  Els ítems no poden ni créixer ni encongir-se. El flex-basis està determinat per el contingut de cada ítem.
• flex: 1;
  Equival a flex: 1 1 0;
  (també podria ser flex:2 , flex:3,…)