Què és CSS Flexbox?
CSS Flexbox (Flexible Box Layout) és un model de disseny unidimensional per distribuir espai i alinear elements en una fila o columna. El contenidor flex es defineix amb display: flex, i els seus fills directes es converteixen en elements flex. Propietats clau del contenidor: flex-direction (fila o columna), flex-wrap (línia única vs. multilínia), justify-content (alineació de l'eix principal), align-items (alineació de l'eix creuat per línia) i align-content (alineació de l'eix creuat de múltiples línies). Propietats clau dels elements: flex-grow (quant creix un element), flex-shrink (quant s'enconge), flex-basis (mida inicial) i align-self (sobreescriu align-items del contenidor per a un element específic). Flexbox és ideal per a barres de navegació, files de targetes, dissenys centrats i qualsevol disposició unidimensional.
Com utilitzar el Generador CSS Flexbox
-
Ajusteu les propietats del contenidor (flex-direction, flex-wrap, justify-content, align-items, align-content, gap) mitjançant els desplegables i l'entrada.
-
Feu clic a qualsevol element de la previsualització per seleccionar-lo (es torna taronja).
-
Establiu flex-grow, flex-shrink, flex-basis i align-self de l'element seleccionat al panell d'elements.
-
Feu clic a '+ Afegir element' per afegir més elements; feu clic a 'Eliminar' per suprimir l'element seleccionat.
-
Canvieu entre les pestanyes CSS i HTML per veure el codi generat i feu clic a Copiar.
-
Feu clic a 'Reiniciar tot' per tornar a començar amb el disseny predeterminat de 3 elements.