Display flex

El display flex és un dels recursos per maquetar pàgines web, ja que ens permet distribuir elements en l’eix horitzontal i vertical. L’ús d’aquest display per a maquetar s’anomena «flexbox»

Els elements amb un display del tipus flex actuen com a «contenidors flex» i els ítems que contenen actuen com a «items flex».

A l’hora de fer servir el display flex, hem de tenir clars alguns conceptes bàsics:

• Eix principal i eix secundari
• Concepte de Start i End

Per defecte, els items flex es col·loquen un al costat de l’altre, en un eix horitzontal. Això és així perquè el valor flex-direction és, per defecte «row». Podem canviar aquest valor per flex-direction:column si volem que es col·loquin un a sota l’altre. Quan flex-direction és «row», l’eix principal és horitzontal. Quan flex-direction és «column», l’eix principal és vertical.

Per defecte, un element es col·locarà al costat de l’altre. El contingut sortirà de la caixa del contenidor flex si no hi ha prou espai per tots els ítems flex. Això és així perquè el valor de la propietat flex-wrap és «nowrap» per defecte. Si volem que els ítems flex formin una graella (es col·loquin a una nova línia si ja no hi ha espai horitzontal), aleshores podem canviar el valor de flex-wrap a «wrap»

Quan el flex-direction és del tipus row, els ítems flex es col·loquen un al costat de l’altre i ocupen el mateix espai vertical. Si el contenidor flex té una alçada definida (amb la propietat height), els ítems flex faran també aquesta alçada. Si no s’ha definit una alçada per al contenidor, o si un dels elements és més gran que aquest valor, els ítems flex seran tan alts com l’ítem flex més alt. Això és així perquè el valor de la propietat align-items és, per defecte, stretch.

Com pots veure, la propietat align-items no actua sobre l’eix principal (el del flex-direction) sinó sobre l’eix secundari (el perpendicular). Si el valor d’align-items és «flex-start», aleshores els ítems s’alinearan segons l’ordre de lectura de l’idioma de la pàgina web. Si el valor de align-items és flex-end, els ítems flex s’alinearan al final.

Fixa’t que no parlem ni de dreta i esquerra ni d’adalt i a baix. Parlem de start i end. Si l’idioma de la pàgina es llegeix d’esquerra a dreta i de dalt a baix, flex-start serà l’esquerra superior i flex-end la dreta inferior. Però en un idioma com l’àrab serà diferent.

Els ítems flex d’un conteanidor amb flex-direction «row», colonitzaran l’espai horitzontal, intentant repartir-se l’espai entre ells. Però si cadascun d’aquests ítems té definida una amplada (width), aleshores els ítems es repartiran l’espai que quedi disponible. Això és així perquè, per defecte el valor de la propietat justify-content és «normal».

Però justify-content pot tenir altres valors:

• flex-end
• flex-start
• center
• space-between
• space-around
• space-evenly

Justify-content controla com es reparteixen l’espai en l’eix principal

Quan la propietat de flex-wrap és wrap, els ítems que no tenen prou espai passen a una nova línia (si la flex-direction és «row») o a una nova columna (quan la flex-direction és «column»). Quan això passa, les files o columnes es reparteixen per l’espai omplint tota la caixa en la dimensió secundària. Això és així perquè el valor de la propietat align-content és «stretch» per defecte.

Altres possibles valors de align-content són: flex-start, flex-end, space-between, space-around i center.

Pots practicar totes aquestes propietats a aquesta web:

https://flexboxfroggy.com/#es