Fins fa relativament poc, podríem fins i tot dir “encara” si el teu desenvolupament requereix d’una alta compatibilitat en versions antigues de navegadors, maquetar mòduls adaptables per a web com ara llistats en files de N blocs suposava crear una llarga llista d’estils css que canviaven segons la resolució dels diferents dispositius. en ocasions “flotábamos” els elements i ens les vèiem amb els marges laterals, en altres aplicàvem “inline-block” i utilitzàvem alguna tècnica estranya per no comptar amb la separació que es creava entre capes per art de màgia, afegíem una capa buida a la fi de la llista per poder justificar el conjunt, i un llarg etcètera de desavantatges que Flexbox ve a solucionar.
què és Flexbox i com s’utilitza.
Flexbox ve de “flexible Box Layout”, que es pot traduir com “Disseny de caixa flexible”, i ens aporta una magnífica solució per tots els nostres desenvolupaments “responsive”. El que ens permet és crear un conjunt d’elements flexibles que s’adapten automàticament al seu contenidor i amb el qual podem controlar paràmetres com ara l’alineació, direcció (horitzontal / vertical), ajust de la fila segons mides i multitud de possibilitats que anem a presentar en aquest article.
quant a compatibilitat, Flexbox és actualment compatible amb els navegadors web més importants i diferents versions dels mateixos, si bé en alguns hem d’utilitzar prefixos cSS per al seu bon funcionament (veure en caniuse .com). Si teniu problemes amb algunes versions antigues, podeu provar a utilitzar “Autoprefixer”. En els següents exemples utilitzarem el codi css tal qual, sense afegits, així que espero que el vostre navegador estigui actualitzat.
L’última definició coneguda sobre Flexbox de W3C és de el 26 de Maig de 2016 a l’hora d’escriure aquest article. A l’enllaç podem veure la seva definició i diferents exemples d’ús. Tal com s’indica en la introducció, fins ara coneixíem quatre modes de disposar dels elements, tres d’presentació (amb variacions alternatives) i un altre de posició:
- – Elements en línia (display: inline)
- – Elements en bloc (display: block)
- – Elements en taula (display: table)
- – Tipus de posició (position: absolute / relative / fixed )
Flexbox és una barreja de tots ells pel que fa a com afecta la disposició d’una estructura d’elements continguts en una capa pare o contenidor, i es defineix com “flex” a la propietat “display” (display: flex). Podem crear una estructura d’elements en línia similar a una taula, o fer que funcionin com un bloc i en ordre invers a la següent resolució, tot això al mateix temps que s’adapta automàticament a la mida que necessitem, tant en amplada com en alçada. Sí, ‘també en alçada !! 😉
El W3C defineix a aquesta estructura com un “flux flexible” d’elements en direcció (amunt / avall / esquerra / dreta) i grandària (amplada / alçada) segons els eixos principal (horitzontal) i transversal ( vertical).
Com per aprofundir en la seva definició ja us he afegit a enllaç de W3C, passarem directament a veure exemples de funcionament.
exemples de maquetació utilitzant Flexbox.
IMPORTANT: Si no visualitzes correctament els següents exemples, el més probable és que el teu navegador no sigui compatible amb aquesta propietat CSS. Si us plau , prova a actualitzar-lo o visualitzar-lo en un altre navegador abans d’increpar l’autor. 😛
Per poder provar totes les possibilitats que ofereix Flexbox CSS, crearem una capa class = “contenidor” que farà de pare i set capes class = “element” numerades. I per què 7? per als exemples ens va bé que sigui un nombre imparell per veure tant l’ordenació com l’adap tació i el seu resultat, i set també per veure un llistat d’elements no molt curt, tot i que podeu provar a col·locar qualsevol nombre d’elements.
HTML:
<div class=”contenedor”> <div class="elemento">1</div> <div class="elemento">2</div> <div class="elemento">3</div> <div class="elemento">4</div> <div class="elemento">5</div> <div class="elemento">6</div> <div class="elemento">7</div></div>
Més enllà dels estils de disseny definits per a la visualització dels exemples, anem a col·locar d’inici una mida d’amplada de l’25% per als elements en relació a l’contenidor pare. Per començar a utilitzar Flexbox afegim a l’contenidor la propietat “display: flex”
CSS EXEMPLE 1:
.contenedor{ display:flex;}.elemento{ width:25%;}
EXEMPLE 1:
Com veiem, al no haver definit encara el comportament de direcció i mida que tindran els elements del nostre contenidor, encara que hàgim definit una amplada d’elements de l’25% aquests s’adapten al seu pare ocupant el 100% d’amplada entre la suma de tots . Per defecte, té aquest comportament “flexible” com indica el seu nom. Però Flexbox és molt més.
flex-direction:
Anem a veure la propietat “flex-direction”, que pot prendre 4 valors i s’aplica a el pare (contenidor):
- – flex-direction: row; – > Els elements es visualitzen d’esquerra a dreta (valor per defecte, similar a l’exemple 1)
- – flex-direction: row-reverse; – > Els elements es visualitzen de dreta a esquerra.
- – flex-direction: column; – > Els elements es visualitzen de dalt a baix.
- – flex-direction: column-reverse; – > Els elements es visualitzen de baix a dalt.
CSS EXEMPLE 2:
.contenedor{ display:flex; flex-direction:row-reverse;}
EXEMPLE 2: a
Els elements inverteixen el seu ordre de visualització de dreta a esquerra, sense tenir en compte l’ordre de la maquetació.
CSS EXEMPLE 3:
.contenedor{ display:flex; flex-direction:column;}
EXEMPLE 3: a
Els elements es visualitzen formant una columna de dalt a baix. En aquest cas, com els elements mesuren el 25% de l’contenidor, la seva amplària sí que pren el valor indicat. Si eliminem l’amplada, les capes s’ajustaran a la mida de l’contenidor, ocupant el 100% d’amplada.
CSS EXEMPLE 4:
.contenedor{ display:flex; flex-direction:column-reverse;}
EXEMPLE 4: a
Els elements es visualitzen formant una columna de baix a dalt, sense tenir en compte l’ordre de la maquetació. L’amplada funciona de manera similar a l’exemple 3.
flex-wrap:
A continuació veurem la propietat “flex-wrap”, el valor afecta a com es distribueixen els elements en fila i, per tant, a la seva mida. Els possibles valors són:
- – flex-wrap: nowrap; – > Els elements es mostren en línia, en una sola fila, i la seva mida s’ajusta a l’contenidor sempre que la suma de tots ells sigui més gran o igual que el 100% de la amplada de l’contenidor. Si és inferior, es continuen mostrant en línia però conserven la seva grandària. Aquest és el valor per defecte, i com vèiem en l’exemple 1, encara que l’amplada dels elements és el 25% de l’contenidor, tots es mostren en línia modificant la seva mida perquè la suma total no sigui superior a el 100% del seu contenidor .
- – flex-wrap: wrap; – > Els elements es mostren en línia, però si la seva amplada supera la de l’contenidor, es distribueixen en diverses files.
- – flex-wrap: wrap-reverse ; – > Els elements es mostren en línia, però si la seva amplada supera la de l’contenidor, es distribueixen en diverses files, ia més ho fan en ordre invers al d’maquetació.
CSS EXEMPLE 5:
.contenedor{ display:flex; flex-wrap:wrap;}
EXEMPLE 5: a
Com comentàvem en els valors de la propietat, en aquest cas els elements es mostren en línia, però com havíem atorgat un valor d’amplada de l’25% de l’contenidor als elements, quan la fila acaba els elements continuen en una altra, i així successivament.
CSS eXEMPLE 6:
.contenedor{ display:flex; flex-wrap:wrap-reverse;}
eXEMPLE 6: a
Aquest exemple d’ordenació de Flexbox és molt curiós, ja que, a més de realitzar l’adaptació de mides per files com en el cas anterior, realitza la seva ordenació al revés, de baix a dalt, i en aquest cas d’esquerra a dreta (que és el sentit per defecte).
podem modificar el sentit de l’orientació horitzontal si a més fem servir “f lex-direction: row-reverse “com podem veure en el següent exemple:
CSS EXEMPLE 7:
.contenedor{ display:flex; flex-direction:row-reverse; flex-wrap:wrap-reverse;}
EXEMPLE 7:
flex-flow:
Aquestes mateixes propietats podem especificar-les en una sola mitjançant “flex-flow” de la manera següent:
flex-flow: < flex-direction > < flex-wrap >
Pel que el codi anterior podria quedar de la següent manera:
CSS:
.contenedor{ display:flex; flex-flow:row-reverse wrap-reverse;}
justify-content:
quant a l’alineació horitzontal dels elements en Flexbox, trobem la propietat “justify-content”, que alinea els elements al llarg de l’eix principal (main axis) del seu contenidor, però a diferència de l’alineació d’un text, en Flexbox cal tenir en compte també la direcció dels elements. Això ho veurem més clarament amb els següents exemples després de la definició dels seus valors més utilitzats:
- – justify-content: flex-start; – > Alinea els elements en horitzontal des de l’inici de la direcció de l’eix principal del seu contenidor (partint des de l’inici de la línia). Aquest és el valor per defecte. És important destacar que, com veurem més endavant, la direcció establerta a “flex-direction” afecta l’alineació.
- – justify-content: flex-end; – > Alinea els elements en horitzontal des del final de la direcció de l’eix principal del seu contenidor (partint des del final de la línia)
- – justify-content : center; – > Alinea els elements a centre de l’eix principal del seu contenidor. Similar a un text alineat a al centre.
- – justify-content: space-between; – > Alinea els elements justificant-los al llarg de l’eix principal del seu contenidor. Similar a un text justificat. Els elements laterals s’enganxen als extrems i la resta es distribueixen al llarg de l’eix principal deixant el mateix espai entre ells.
- – justify-content: space-around; – > Alinea els elements distribuint els seus centres de forma horitzontal al llarg de l’eix principal del seu contenidor, deixant el mateix espai lateral de separació a l’començament, a al final i entre ells.
Aquesta propietat com a millor es comprèn és mitjançant un exemple, ja que si provem “justify-content: flex-start” amb la resta de propietats per defecte, obtindrem un resultat similar a l’alineació d’un text a l’esquerra. Però … i si la direcció és inversa? en aquest cas obtindríem que l’alineació seria a la dreta, ja que el que Flexbox té en compte per a l’alineació dels elements és l’inici de la direcció de l’eix ( ja sigui principal -horizontal- o transversal -vertical-, com veurem més tard).
CSS EXEMPLE 8:
.contenedor{ display:flex; flex-direction:row; flex-wrap:wrap; justify-content:flex-start;}
EXEMPLE 8 : a
En aquest cas veiem que l’alineació dels elements és a l’esquerra del seu contenidor. Ara invertirem la direcció dels mateixos mediant i “flex-direction: row-reverse” i veurem el que passa:
CSS EXEMPLE 9:
.contenedor{ display:flex; flex-direction:row-reverse; flex-wrap:wrap; justify-content:flex-start;}
EXEMPLE 9:
Veiem que en aquest cas els elements s’alineen a la dreta. Es pot arribar a pensar que “justify-content: flex-start” realment no està fent res, ja que en els exemples 1 i 2 ja obteníem aquests resultats sense necessitat d’aquesta propietat, però … i si volem que la direcció dels elements sigui inversa però estiguin alineats a l’esquerra? Si canviem la propietat a “justify-content: flex-end” vam aconseguir aquest resultat, comprovant que realment funciona:
CSS EXEMPLE 10:
.contenedor{ display:flex; flex-direction:row-reverse; flex-wrap:wrap; justify-content:flex-end;}
EXEMPLE 10: a
a continuació vam comprovar mitjançant exemples els valors d’alineació horitzontal que ja hem vist, realitzant modificacions en l’amplada dels elements per que es puguin comprendre millor els efectes. Primer una alineació a al centre:
CSS EXEMPLE 11:
.contenedor{ display:flex; flex-direction:row; flex-wrap:wrap; justify-content:center;}.elemento{ width:21%;}
EXEMPLE 11: a
Ara veurem una alineació “justificada”. la separació entre la línia superior i inferior és diferent a causa de el nombre d’elements entre elles:
CSS EXEMPLE 12:
.contenedor{ display:flex; flex-direction:row; flex-wrap:wrap; justify-content:space-between;}.elemento{ width:21%;}
EXEMPLE 12: a
i ara una alineació distribuint els seus centres horitzontals. En aquest cas podem veure que es crea una espècie de “marges laterals similars” entre els elements (i entre línies , depenent de el nombre d’elements que hi hagi en cadascuna d’elles).
CSS EXEMPLE 13:
.contenedor{ display:flex; flex-direction:row; flex-wrap:wrap; justify-content:space-around;}.elemento{ width:21%;}
EXEMPLE 13:
align-items | align-self | align-content:
L’alineació vertical es realitza a través de l’anomenat “eix transversal” (cross axis), i per això comptem amb tres propietats diferents, “align-items”, “align-self” i “align-content”. Aquí ve l’embolic, ja que si no s’entén el concepte moltes vegades s’obtenen resultats inesperats. Anem a veure què ens explica el W3C sobre aquestes propietats:
- – “align-items” estableix l’alineació per defecte per a tots els elements de l’contenidor, inclosos els elements independents.
- – “align-self” permet alinear elements independents de l’contenidor.
- – “align-content” alinea les línies / files d’elements d’un contenidor.
per tant, “align-items” ens serveix per alinear els elements i “align-content” per alinear les files d’aquests, mentre que “align-self” ens permet alinear elements de forma independent. Sabent això, podem deduir que “align-content” només funciona quan tenim més d’una fila d’elements. La imatge superior representa molt bé com funcionen aquestes propietats. A continuació veurem els valors que poden prendre cadascuna d’elles (els valors de ” align-items “són vàlids per a” align-self “):
- – align-items: stretch; – > Valor per defecte. L’altura dels elements s’ajusta a la mida de l’contenidor (o fila), dividint l’espai sobrant entre tots els elements per igual.
CSS EXEMPLE 14:
.contenedor{ height:240px; display:flex; flex-flow:row wrap; justify-content:flex-start; align-items:stretch;}.elemento{ width:21%;}
EXEMPLE 14: a
- – align-items: flex-start; – > Alinea en vertical els elements des de l’inici de la direcció de l’eix transversal del seu contenidor (a l’igual que passava en horitzontal). També afecta el valor de “flex-direction” a el sentit de l’alineació vertical.
CSS EXEMPLE 15:
.contenedor{ height:240px; display:flex; flex-flow:row wrap; align-items:flex-start;}.elemento{ width:21%;}
EXEMPLE 15: a
- – align-items: flex-end; – > Alinea en vertical els elements des del final de la direcció de l’eix transversal del seu contenidor (a l’igual que passava en horitzontal).
CSS EXEMPLE 16:
.contenedor{ height:240px; display:flex; flex-flow:row wrap; align-items:flex-end;}.elemento{ width:21%;}
EXEMPLE 16:
- – align-items: center; – > Alinea a centre vertical els elements al llarg de l’eix transversal del seu contenidor .
CSS EXEMPLE 17:
.contenedor{ height:240px; display:flex; flex-flow:row wrap; align-items:center;}.elemento{ width:21%;}
EXEMPLE 17: a
- – align-items: baseline; – > Alinea en vertical les “línies base” dels elements al llarg de l’eix transversal del seu contenidor. Per poder comprendre aquest exemple, anem a afegir alguns estils diferents als elements:
CSS EXEMPLE 18:
.contenedor{ height:240px; display:flex; flex-flow:row wrap; align-items:baseline;}.elemento{ width:21%; line-height:2rem;}.elemento:first-child{ line-height:4rem;}.elemento:nth-child(3){ font-size:1rem; line-height:1.2rem;}.elemento:nth-child(6){ font-size:3rem; line-height:5rem;}.elemento:last-child{ line-height:3rem;}
EXEMPLE 18: a
Com podem observar, el que s’alinea en vertical és la línia base de l’contingut de cada element, en aquest cas, la línia base de cada número, encara que entre ells tinguin altures de línia o mides diferents.
Passem a veure la descripció per als valors de la propietat “align-content”:
- – align-content: stretch; – > Valor per defecte. l’alçada de les files s’ajusten a la mida de l’contenidor, dividint l’espai sobrant entre totes les línies de la mateixa manera.
CSS EXEMPLE 19 :
.contenedor{ height:240px; display:flex; flex-flow:row wrap; align-content:stretch;}.elemento{ width:21%;}
EXEMPLE 19: a
- – align-content: flex-start; – > Alinea en vertical les files des de l’inici de la direcció de l’eix transversal del seu contenidor.
CSS EXEMPLE 20:
.contenedor{ height:240px; display:flex; flex-flow:row wrap; align-content:flex-start;}.elemento{ width:21%;}
EXEMPLE 20: a
- – align-content: flex-end; – > Alinea en vertical les files des del final de la direcció de l’eix transversal del seu contenidor.
CSS EXEMPLE 21:
.contenedor{ height:240px; display:flex; flex-flow:row wrap; align-content:flex-end;}.elemento{ width:21%;}
EXEMPLE 21: a
- – align-content: center; – > Alinea a centre vertical les files al llarg de l’eix transversal del seu contenidor.
CSS EXEMPLE 22:
.contenedor{ height:240px; display:flex; flex-flow:row wrap; align-content:center;}.elemento{ width:21%;}
EXEMPLE 22: a
- – align-content: space-between; – > Alinea les files justificant-les al llarg de l’eix transversal del seu contenidor. Similar a un text justificat en vertical. Les files superior i inferior s’enganxen als seus extrems i la resta es distribueixen al llarg de l’eix transversal deixant el mateix espai entre elles.
CSS EXEMPLE 23:
.contenedor{ height:240px; display:flex; flex-flow:row wrap; align-content:space-between;}.elemento{ width:21%;}
EXEMPLE 23: a
- – align-content: space-around; – > Alinea les línies distribuint els seus centres de forma vertical al llarg de l’eix transversal del seu contenidor, deixant el mateix espai vertical de separació a la part superior, inferior i entre ells.
CSS EXEMPLE 24:
.contenedor{ height:240px; display:flex; flex-flow:row wrap; align-content:space-around;}.elemento{ width:21%;}
EXEMPLE 24: a
Les propietats més curioses i interessants de Flexbox.
Fins ara hem vist propietats que influeixen en la direcció, alineació i mida d’elements i files (i encara que no hem entrat en detall, columnes) d’un contenidor Flexbox. Però a continuació veurem propietats impressionants, ja que amb elles podem modificar elements de forma independent augmentant les possibilitats de presentació de webs i interfícies.
order:
Entre aquestes propietats es troba “order”, i és que com hem pogut comprovar amb Flexbox no ens importa l’ordre de maquetació dels nostres elements, i podem alterar aquest ordre amb tan sols una instrucció. Que aixequi la mà qui no hagués pagat per tenir aquesta propietat i oblidar-se de wrap / unwrap de jquery 😉
- – order: – > Posiciona un element en l’ordre assignat pel nombre sencer especificat a la propietat, tenint en compte el valor assignat a la resta d’elements, el valor per defecte és 0 (zero). Això vol dir que, tret que s’especifiqui un ordre a tots els elements, qualsevol nombre aplicat a un sol element el portarà a l’última posició. Això és degut a que per defecte tots tenen “zero”, de manera que si assignem per exemple “order: 3” a qualsevol element, aquest es col·locarà a la fi de la llista. Més que un ordre, podríem anomenar un “valor de posició d’ordenació”.El següent exemple pot servir-nos per comprendre millor aquesta propietat:
CSS EXEMPLE 25:
.contenedor{ display:flex;}.elemento:nth-child(even){ order:1;}
EXEMPLE 25:
Amb aquest exemple podem entendre millor el funcionament d’aquesta propietat, i és que estem assignant l’ordre / posició “1” a tots els elements parells, que se situen després dels elements senars, que tindrien per defecte el valor “0”.
flex:
a continuació veurem la propietat “flex” que s’aplica als elements de l’contenidor i que a la vegada s’estructura de tres propietats diferents i que es poden presentar per separat, “flex- grow”, “flex-shrink” i “flex-basis”, i es defineix de la següent manera:
- – flex: none | < flex-grow > < flex-shrink > < flex-basis >
Anem a veure les propietats per separat:
- – flex-grow: < nombre >; – > Determina el factor d’increment de mida d’un o diversos elements en relació a la resta tenint en compte l’espai “buit” o “lliure” entre ells. Com a espai “buit / lliure” ens referim a l’espai que no ocupen els elements en relació al seu fila. Quan aquest valor s’omet, s’estableix en 1.
- – flex-shrink: < nombre >; – > Determina el factor de disminució de mida d’un o diversos elements en relació a la resta tenint en compte l’espai “buit” o “lliure” entre ells. Quan aquest valor s’omet, s’estableix en 1.
- – flex-basis: acte | 0 | < width > – > Especifica la mida principal inicial dels elements tenint en compte l’espai “buit” o “lliure” entre ells. Quan aquest valor s’omet, s’estableix en 0. Aquesta propietat fa que, depenent de la valor assignat, la mida “base” s’interpreti com “tot l’espai” de l’element o com el “espai sobrant” de la mateixa. A continuació veiem un gràfic on visualment s’explica com s’interpreten aquests valors en relació a la mida de l’element.
Aquesta propietat “flex” pot funcionar de diferents formes depenent de la valor que establim i no podem presentar tots els possibles exemples que poden donar-se. el millor en aquest cas és que proveu directament a modificar els seus valors amb una maquetació bàsica i així poder observar el seu comportament. Nosaltres us oferim un punt de partida com el de l’exemple amb el qual podeu començar a jugar amb l’inspector de contingut del vostre navegador:
CSS eXEMPLE 26:
.contenedor{ display:flex;}.elemento{ flex:1 1 0;}.elemento:nth-child(4){ flex-grow:3;}
EXEMPLE 26: a
Flexbox. La solució òptima per al disseny adaptable.
Com hem pogut veure en aquest article, Flexbox és el complement perfecte per a la maquetació de diferents mòduls de contingut en llista i mitjançant petites propietats poder canviar el seu aspecte, distribució, mida i alineació perquè s’adeqüi sense problemes a el dispositiu on ho estiguem visualitzant, però això és només un petit exemple de tot el que podem desenvolupar. Amb imaginació i pràctica es pot aplicar a multitud de casuístiques i reduir molt notablement el temps de desenvolupament. Espero que serveixi a des / coneixedors d’aquesta tècnica CSS com a guia de consulta. Salutacions!