AW: UF5.

Fonaments d’HTML i CSS

NF2 - Introducció a CSS

Repte UF5.12 - CSS: Flexbox

Objectiu
● Comprendre les característiques de flexbox i la seva aplicació a CSS.
● Fer ús de les propietats CSS de Flexbox per posicionar els elements en una pàgina
web.

Recursos
● Aprende CSS Flexbox en 15 mintuos - tuwebcreativa.com
● 🔷 Aprende CSS Flexbox en MENOS de 15 MINUTOS

Flexbox és una característica de CSS que ens permet disposar i alinear

elements en un contenidor web. Això vol dir que amb Flexbox podem
canviar la posició i la mida dels elements per adaptar-se a diferents
dimensions de pantalla i fer que els nostres dissenys web siguin més
flexibles i responsius.

Imagina que vols fer un navegador o menú per la teva pàgina web perquè
la gent pugui trobar fàcilment els principals apartats d’aquesta:

És possible que ara mateix ja siguis capaç de donar estils per tal d’obtenir
un d’aquests elements, però tindríem dificultats per situar-los d’aquesta
manera ràpidament. Aquí és on intervé una eina com Flexbox.

Ho aconseguim perquè els elements HTML s’adapten i es situen

automàticament fent molt més fàcil personalitzar els dissenys. Està pensat
per dissenys d’una sola dimensió, és a dir, o files o columnes.

Abans d’aquest es feien servir alguns “layouts”, alguns dels quals hem vist,
com:

● Block ● Table
● Inline ● Positio
Abans de continuar revisa els recursos proposats!

A continuació, mira d’anar aconseguint els següents resultats per a

cadascun dels exemples proposats fent ús de les propietats de Flexbox.
Per fer-ho tens el codi per començar on veuràs dues classes ja preparades
perquè vagis modificant
Un cop ho tinguis, pots practicar amb l’aplicacio Flexbox Froggy, una eina
molt últil per aprendre Flexbox!