Generador de Flexbox
Configureu un contenidor flex i els seus elements amb controls visuals, observeu com reacciona el disseny en temps real i copieu el CSS amb un sol clic.
La seva disposició es crea directament al seu navegador. Cap dada que defineixi aquí es puja a BroBroGo.
PMF
Quina és la diferència entre justify-content i align-items?
Justify-content distribueix els elements al llarg de l'eix principal (la direcció en què flueix la fila o la columna), mentre que align-items els posiciona al llarg de l'eix transversal. Si canvieu la direcció de fila a columna, els dos eixos s'intercanvien, de manera que justify-content comença a funcionar de dalt a baix i align-items d'esquerra a dreta.
Com funcionen els controls per element?
Trieu un element pel seu número i, a continuació, definiu quant creix per omplir l'espai sobrant, quant es redueix quan l'espai és limitat, la seva mida inicial (basis) i la seva pròpia alineació en l'eix transversal. L'ordre mou un element abans o després a la pantalla sense tocar l'HTML. Només els elements que canvieu realment rebran la seva pròpia regla al CSS.
Quan són importants wrap i align-content?
Amb el salt de línia desactivat, tots els elements es forcen a una sola línia i es poden estrènyer. Si l'activeu, els elements que ja no hi caben passen a la línia següent; és llavors quan align-content pren el control, distribuint les línies com un grup. Gap defineix l'espai entre elements i entre línies, sense necessitat de marges.