Generatore di Flexbox
Configuri un contenitore flex e i relativi elementi con controlli visivi, osservi la risposta del layout in tempo reale e copi il codice CSS con un clic.
Il layout viene creato direttamente nel Suo browser. Nessun dato impostato viene caricato su BroBroGo.
FAQ
Qual è la differenza tra justify-content e align-items?
Justify-content distribuisce gli elementi lungo l'asse principale (la direzione di scorrimento della riga o della colonna), mentre align-items li posiziona lungo l'asse perpendicolare. Se si cambia la direzione da riga a colonna, i due assi si invertono: justify-content agirà dall'alto in basso e align-items da sinistra a destra.
Come funzionano i controlli per i singoli elementi?
Selezioni un elemento in base al suo numero, quindi imposti quanto debba crescere per occupare lo spazio rimanente (grow), quanto debba rimpicciolirsi quando lo spazio è limitato (shrink), la sua dimensione iniziale (basis) e il suo allineamento specifico sull'asse secondario. La proprietà order consente di spostare la posizione visiva dell'elemento senza modificare il codice HTML. Solo gli elementi effettivamente modificati riceveranno una regola dedicata nel codice CSS generato.
Quando sono importanti le proprietà wrap e align-content?
Se l'andata a capo (wrap) è disattivata, tutti gli elementi vengono forzati su un'unica riga e potrebbero essere compressi. Attivandola, gli elementi che non rientrano nello spazio disponibile passeranno alla riga successiva: in questo scenario entra in gioco align-content, che gestisce la spaziatura tra le righe come gruppo. La proprietà gap definisce lo spazio tra gli elementi e tra le righe, senza ricorrere ai margini.