This translation is incomplete. Please help translate this article from English.

Una nova tecnologia, però amb suport ara bastant generalitzat en tots els navegadors, Flexbox està començant a estar preparat per a un ús generalitzat. Flexbox proporciona eines que permeten crear ràpidament dissenys complexos i flexibles i característiques que històricament resulten difícils amb CSS. Aquest article explica tots els fonaments.

Requisits previs: Conceptes bàsics d'HTML (estudi Introducció a HTML), i una idea de com funciona CSS (estudi Introducció a CSS).
Objectiu: Aprendre sobre com utilitzar el sistema de disseny de Flexbox per crear dissenys web.

Per què Flexbox?

Durant molt de temps, les úniques eines fiables compatibles amb els navegadors, disponibles per crear dissenys CSS, eren coses com ara flotadors (floats) i posicionament. Estan bé i funcionen, però d'alguna manera també són més limitades i frustrants.

Els següents requisits amb dissenys senzills són difícils o impossibles d'aconseguir amb aquestes eines, en qualsevol tipus de forma còmoda i flexible:

  • Centrar verticalment un bloc de contingut dins del seu pare.
  • Fer que tots els fills d'un contenidor ocupin una quantitat igual de l'amplada/alçada disponible, independentment de la quantitat d'ample/alçada que hi hagi disponible.
  • Fer que totes les columnes d'un disseny de columnes múltiples adoptin la mateixa alçada tot i que continguin una quantitat de contingut diferent.

Com veureu en seccions posteriors, flexbox fa que moltes tasques de disseny siguin molt més fàcils. Anem a aprofundir en!

Presentant un exemple senzill

En aquest article, us farem a treballar a través d'una sèrie d'exercicis que us ajudaran a comprendre com funciona flexbox. Per començar, haureu de fer una còpia local del primer fitxer d'inici - flexbox0.html del nostre repositori github - carregueu-lo en un navegador modern (com Firefox o Chrome) i consulteu el codi en el vostre editor. Ja ho podeu veure en directe aquí també.

Veureu que tenim un element <header> amb un encapçalament de nivell superior dins d'ell, i un element <section> que conté tres elements <article>s. Anem a utilitzar-los per crear un disseny de tres columnes bastant estàndard.

Especificar quins elements es mostraran com caixes flexibles

Per començar, hem de seleccionar quins elements s'han d'establir com caixes flexibles. Per fer-ho, establim un valor especial de display en l'element pare dels elements que voleu afectar. En aquest cas, volem disposar dels elements <article>, per la qual cosa ho configurem en <section> (que es converteix en un contenidor flex):

section {
  display: flex;
}

El resultat d'això hauria de ser alguna cosa així:

Per tant, aquesta declaració única, ens dóna tot el que necessitem - increïble, oi? Tenim el nostre disseny de columna múltiple amb columnes de mida igual, i les columnes tenen la mateixa alçada. Això es deu a que els valors predeterminats donats als elements flex (els fills del contenidor flex) estan configurats per resoldre problemes comuns com aquest. Més sobre aquells més tard.

Note: També podeu establir un valor display de inline-flex si voleu establir elements en línia com caixes flexibles.

Un a part en el model flex

Quan els elements es presentan com caixes flexibles, es distribueixen al llarg de dos eixos:

flex_terms.png

  • L'eix principal (main axis) és l'eix que corre en la direcció en què s'estan disposant els elements flex (p. ex., com a files al llarg de la pàgina o columnes cap avall de la pàgina). L'inici i el final d'aquest eix s'anomenen inici principal (main start) i final principal (main end).
  • L'eix transversal (cross axis) és l'eix que corre perpendicular a la direcció en què s'estan col·locant els elements flexibles. L'inici i el final d'aquest eix s'anomena inici transversal (cross-start) i final tranveral (cross-end).
  • L'element pare que té display: flex establer en ell (la <section> en el nostre exemple) s'anomena contenidor flexible (flex container).
  • Els elements que es col.locan com caixes flexibles dins del contenidor flexible s'anomenan elements flexibles (flex items)  (els elements <article> del nostre exemple).

Tingueu en compte aquesta terminologia a mesura que passem per seccions posteriors. Sempre podeu referir-vos a ella si es confon amb qualsevol dels termes utilitzats.

Columnes o files?

Flexbox proporciona una propietat anomenada flex-direction que especifica en quina direcció discorre l'eix principal (a quina direcció es troben els fills flexbox) - per defecte, aquesta s'estableix a la fila, el que fa que s'estableixin en una fila en la direcció de l'idioma predeterminat en el qual funciona el vostre navegador (d'esquerra a dreta, en el cas d'un navegador en anglès).

Proveu d'afegir la següent declaració a la vostra regla section:

flex-direction: column

Veureu que això posa els elements de nou en un disseny de columna, igual que estaven abans que haguéssim agregat qualsevol CSS. Abans de continuar, elimineu aquesta declaració del vostre exemple.

Nota: També podeu dissenyar elements flexibles en una direcció inversa utilitzant els valors row-reverse i column-reverse. Experimenta amb aquests valors també!

Ajustar

Un problema que sorgeix quan teniu una quantitat fixa d'amplada o alçada en el disseny, és que eventualment els fills del vostre flexbox desbordaran el contenidor, trencant el disseny. Feu un cop d'ull al nostre exemple flexbox-wrap0.html i proveu de veure-ho en directe (feu una còpia local d'aquest fitxer, ara, si voleu seguir aquest exemple):

Aquí veiem que els fills estan sortint del contenidor. Una manera de solucionar això és afegir la següent declaració a la vostra regla  section:

flex-wrap: wrap

Proveu-ho ara; Veureu que el disseny es veu molt millor amb això inclòs:

Ara tenim diverses files - com molts fills flexbox encaixen a cada fila, el que té sentit, i qualsevol desbordament es mou cap a la línia següent. La declaració flex: 200px establerta en els articles significa que cadascun tindrà almenys 200px d'ample; parlarem més endavant d'aquesta propietat en més detall.També podeu observar que els últims fills de l'última fila són cada vegada més amplis, de manera que tota la fila segueix estant plena.

Però hi ha més que podem fer aquí. Primer de tot, proveu de canviar el valor de la propietat flex-direction a row-reverse - veureu que encara teniu el disseny de files múltiples, però es comença des de la cantonada oposada de la finestra del navegador i ara flueix en sentit invers.

flex-flow abreujat

En aquest punt, val la pena observar que existeix un abreujat per  flex-direction i flex-wrap - flex-flow. Per exemple, podeu reemplaçar

flex-direction: row;
flex-wrap: wrap;

per

flex-flow: row wrap;

Dimensió flexible d'elements flexibles

Tornem ara al nostre primer exemple i observem com podem controlar quina proporció d'espai els elements flexibles poden ocupar. Feu servir la vostra còpia local de flexbox0.html, o feu una còpia de flexbox1.html com a nou punt de partida (vegeu-lo en directe).

Primer, afegiu la següent regla al final del vostre CSS:

article {
  flex: 1;
}

Es tracta d'un valor de proporció sense unitat que determina quina quantitat de l'espai disponible al llarg de l'eix principal ocuparà cada element flexible. En aquest cas, estem donant a cada element <article> un valor de 1, el que significa que tots ocuparan una quantitat igual de l'espai sobrant deixat després de que s'hagin establert elements com el farciment i el marge. És una proporció, el que significa que donar a cada element flexible un valor de 400000 tindria exactament el mateix efecte.

Ara, afegiu la següent regla per sota de l'anterior:

article:nth-of-type(3) {
  flex: 2;
}

Ara, quan actualitzeu, veureu que el tercer <article> ocupa el doble de l'amplada disponible que els altres dos - ara hi ha quatre unitats proporcionals disponibles en total. Els dos primers elements flexibles tenen un cadascun, de manera que prenen 1/4 de l'espai disponible cadascun. El tercer té dues unitats, de manera que ocupa 2/4 de l'espai disponible (o 1/2).

També podeu especificar un valor de mida mínima dins del valor de flex. Intenteu actualitzar les vostres regles article existents, així:

article {
  flex: 1 200px;
}

article:nth-of-type(3) {
  flex: 2 200px;
}

Això bàsicament indica que "Cada element flexible es lliurarà primer a 200px de l'espai disponible. Després d'això, la resta de l'espai disponible es compartirà segons les unitats de proporció". Intenteu actualitzar i veureu una diferència en com es reparteix l'espai.

El valor real de flexbox es pot veure en la seva flexibilitat/capacitat de resposta - si canvieu la mida de la finestra del navegador o afegiu un altre element <article>, el disseny continua funcionant bé.

flex: abreujat versus no abreujat

flex és una propietat de abreujada que pot especificar fins a tres valors diferents:

  • El valor de la proporció sense unitat que hem comentat anteriorment. Aquest es pot especificar individualment utilitzant la propietat no abreujada flex-grow.
  • Un segon valor de proporció sense unitat - flex-shrink - que entra en joc quan els elements flexibles estan desbordats en el seu contenidor. Aquest especifica quant de la quantitat desbordada es treu de la mida de cada element flexible, per evitar que es desbordi del seu contenidor. Aquesta és una característica avançada de flexbox i no la cobrim més enllà en aquest article.
  • El valor mínim de la mida que hem comentat anteriorment. Aquest es pot especificar individualment usant el valor no abreujat flex-base.

Recomanem evitar l'ús de les propietats flex no abreujades a menys que realment hagueu de (per exemple, substituir alguna cosa anteriorment establerta). Condueix a escriure una gran quantitat de codi addicional, i podent ser una mica confús.

Alineació horitzontal i vertical

També podeu utilitzar funcions flexbox per alinear elements flexibles al llarg dels eixos principals o transversals. Expliquem-ho, examinant un nou exemple - flex-align0.html (vegeu-lo també en directe) - que convertirem en un pulcre, botó/barra d'eines flexible. De moment veureu una barra de menú horitzontal, amb alguns botons agrupats a la cantonada superior esquerra.

Primer, feu una còpia local d'aquest exemple.

Ara, afegiu el següent a la part inferior del CSS de l'exemple:

div {
  display: flex;
  align-items: center;
  justify-content: space-around;
}

Actualitzeu la pàgina i veureu que els botons estan ben centrats, horitzontal i verticalment. Ho hem fet mitjançant dues noves propietats.

El control align-items fa que els elements flexibles s'asseguin a l'eix transversal.

  • Per defecte, el valor és stretch, que estira tots els elements flexibles per omplir el pare en la direcció de l'eix transversal. Si el pare no té un ample fix en la direcció de l'eix creuat, tots els elements flexibles es convertiran en els elements flexibles més llargs. Així és com el nostre primer exemple tenia columnes d'alçada igual per defecte.
  • El valor center que hem utilitzat en el nostre codi anterior fa que els elements mantinguin les seves dimensions intrínseques, però que estiguin centrats al llarg de l'eix transversal. És per això que els botons de l'exemple actual estan centrats verticalment.
  • També podeu tenir valors com flex-start i flex-end, que alinearan tots els elements al principi i al final de l'eix transversal, respectivament. Vegeu align-items per obtenir-ne els detalls complets.

Podeu anul·lar el comportament align-items per a elements flexibles individuals aplicant la propietat align-self. Per exemple, intenteu afegir el següent al vostre CSS:

button:first-child {
  align-self: flex-end;
}

Feu un cop d'ull a l'efecte que té i retireu-lo de nou quan hàgiu acabat.

justify-content controls on els elements flexibles s'assenten a l'eix principal.

  • El valor per defecte és flex-start, que fa que tots els elements s'asseguin al principi de l'eix principal.
  • Podeu fer servir flex-end perquè s'asseguin al final.
  • center també és un valor per justify-content i farà que els elements flexibles s'asseguin al centre de l'eix principal.
  • El valor que hem utilitzat anteriorment, space-around, és útil - distribueix tots els elements uniformement al llarg de l'eix principal, deixant una mica d'espai a l'esquerra en cada extrem.
  • Hi ha un altre valor, space-between, que és molt similar a space-around, excepte que no deixa cap espai en cap dels dos extrems.

Ens agradaria animar-vos a jugar amb aquests valors per vegeu com funcionen abans de continuar.

Ordre dels elements flexibles

Flexbox també té una característica per canviar l'ordre de disposició dels elements flexibles, sense afectar l'ordre d'origen. Aquesta, és una altra cosa que és impossible de fer amb els mètodes tradicionals de disseny.

El codi per això és senzill: intenteu afegir el següent codi CSS al codi d'exemple de la barra de botons:

button:first-child {
  order: 1;
}

Actualitzeu, i ara veureu que el botó "Smile" s'ha mogut al final de l'eix principal. Parlarem de com això funciona amb una mica més detall:

  • Per defecte, tots els elements flexibles tenen un valor de order de 0.
  • Els elements flexibles amb valors d'ordre superiors establerts en ells apareixeran més endavant en l'ordre de visualització que els elements amb valors de menor ordre.
  • Els elements flexibles amb el mateix valor d'ordre apareixeran en el seu ordre d'origen. Així, si teniu quatre elements amb valors d'ordre 2, 1, 1 i 0 establerts en ells, respectivament, el seu ordre de visualització seria 4rt, 2on, 3er i 1er.
  • El 3er element apareix després del 2on perquè té el mateix valor d'ordre i està després en l'ordre d'origen.

Podeu establir valors d'ordre negatius per fer que els elements apareguin abans que els elements amb 0. Per exemple, podeu fer que el botó "Blush" aparegui al principi de l'eix principal utilitzant la següent regla:

button:last-child {
  order: -1;
}

Caixes flexibles niades

És possible crear alguns dissenys força complexos amb flexbox. Està perfectament correcte establir un element flexible per ser també un contenidor flexible, de manera que els seus fills també estiguin distribuïts com caixes flexibles. Feu un cop d'ull a complex-flexbox.html (vegeu-lo també en directe).

L'HTML per a això és bastant senzill. Tenim un element <section> que conté tres <article>s. El tercer <article> conté tres <div>s.:

section - article
          article
          article - div - button   
                    div   button
                    div   button
                          button
                          button

Feu un cop d'ull el codi que hem utilitzat per al disseny.

En primer lloc, establim els fills de <section> per ser distribuïts com a caixes flexibles.

section {
  display: flex;
}

A continuació, establim alguns valors flex en els propis <article>s. Tingueu en compte la 2a regla aquí - estem establint el tercer <article> per tenir els seus fills disposats com elements flexibles també, però aquesta vegada els estem posant com una columna.

article {
  flex: 1 200px;
}

article:nth-of-type(3) {
  flex: 3 200px;
  display: flex;
  flex-flow: column;
}

A continuació, seleccionem el primer <div>. Primer utilitzem flex: 1 100px; per donar-li efectivament una alçada mínima de 100 px, llavors configurem els seus fills (els elements <button>) que també es defineixen com elements flexibles. Aquí els distribuïm en una fila d'embolcall, i alineats al centre de l'espai disponible com ho vam fer en l'exemple del botó individual que vam veure anteriorment.

article:nth-of-type(3) div:first-child {
  flex: 1 100px;
  display: flex;
  flex-flow: row wrap;
  align-items: center;
  justify-content: space-around;
}

Finalment, hem establert una mida del botó, però el més interessant és el valor que li donem a flex de 1. Això té un efecte molt interessant, que veureu si intenteu canviar la mida de l'ample de la finestra del navegador. Els botons ocuparan tant espai com poguin i s'asseuran a la mateixa línia com sigui possible, però quan ja no poguin cabre còmodament en la mateixa línia, es deixaran caure cap avall per crear noves línies.

button {
  flex: 1;
  margin: 5px;
  font-size: 18px;
  line-height: 1.5;
}

Compatibilitat amb altres navegadors

El suport de Flexbox està disponible a la majoria de navegadors nous: Firefox, Chrome, Opera, Microsoft Edge i IE 11, versions més noves d'Android/iOS, etc. No obstant això, heu de tenir en compte que encara hi ha navegadors antics en ús que no suporten Flexbox ( o bé, però, suportan una versió molt antiga i actualitzada).

Mentre estigueu aprenent i experimentant, això no importa massa; No obstant això, si esteu considerant l'ús de flexbox en un lloc web real, heu de fer proves i assegurar-vos que la vostra experiència d'usuari segueixi sent acceptable en el major nombre possible de navegadors.

Flexbox és una mica més complicat que algunes característiques CSS. Per exemple, si un navegador no té cap ombra d'estil CSS, probablement el lloc serà encara útilitzable. La no compatibilitat amb les característiques de flexbox, probablement trencarà un disseny per complet, cosa que ho farà inutilitzable.

Parlarem sobre les estratègies per superar els problemes complicats de suport del navegador en un mòdul futur.

Resum

Això conclou el nostre recorregut pels fonaments de flexbox. Esperem que us hàgiu divertit, i sapigueu jugar amb ells mentre viatgeu cap a endavant amb el vostre aprenentatge. A continuació, veurem un altre aspecte important dels dissenys CSS - sistemes de quadrícula.

Document Tags and Contributors

 Contributors to this page: Legioinvicta
 Last updated by: Legioinvicta,