Ho scritto la dichiarazione display: flex più volte di quante ne possa contare, e ancora occasionalmente dimentico se lo è justify-content oppure align-items ciò controlla l'asse verticale in fila. Questa non è ignoranza; è la realtà onesta di un modello di layout il cui comportamento cambia a seconda flex-direction. Quando la direzione è row, justify-content funziona orizzontalmente Passa a column e la stessa proprietà ora funziona verticalmente Chiunque affermi di non aprire mai gli strumenti di sviluppo del browser per spingere questi valori finché le scatole non atterrano dove vogliono, giace o ha una memoria molto migliore della mia.
la Generatore Flexbox è lo strumento che vorrei avere quando stavo imparando questo modello, e quello che ancora raggiungo quando voglio prototipare un layout senza toccare un foglio di stile Imposti le proprietà del contenitore, una fila di caselle campione si rifà in tempo reale e l'esatto CSS che produce ciò che vedi si trova in una casella pronta per la copia sotto Si trasforma & quot; ricorda quale proprietà fa cosa& quot; in & quot; fai clic fino a quando non sembra a destra, quindi leggi la risposta.& quot;
tl; dr: Flexbox è un modello di layout unidimensionale Il contenitore lo guida attraverso sei proprietà:
flex-direction,flex-wrap,justify-content,align-items,align-content, egap. Questo generatore li espone tutti, mostra un'anteprima live ed emette CSS puliti Poiché l'anteprima esegue il rendering con le stesse dichiarazioni che emette, ciò che vedi è esattamente ciò che incolli Viene eseguito interamente nel browser senza registrazione.
Che problema risolve un generatore flexbox?
Flexbox è potente proprio perché è relativo Descrivi l'intento (& quot; spargi questi elementi con uguale spazio tra loro, & quot; & quot; centra questo su entrambi gli assi") e il browser calcola i pixel Ma i sistemi relativi sono difficili da tenere nella tua testa, perché l'effetto di ogni proprietà dipende dallo stato delle altre. align-content non fa nulla fino a quando gli elementi si avvolgono L'asse principale e l'asse trasversale si scambiano quando si cambia direzione. space-between e space-around sembra simile finché non li confronti fianco a fianco.
Il modo più veloce per costruire l'intuizione per un sistema relativo è manipolarla e guardare Un generatore fa collassare il ciclo di modifica-salvataggio-aggiornamento in un'unica interazione: cambia un menu a discesa, vedi le caselle muoversi Dopo dieci minuti con un'anteprima live, la proprietà che controlla l'asse trasversale smette di essere un fatto che memorizzi e diventa qualcosa che senti E quando hai finito di esplorare, non ti rimane una nota mentale da trascrivere; il CSS funzionante è già scritto per te.
Quali proprietà controlla il contenitore?
Flexbox divide la responsabilità tra il contenitore e i suoi articoli Il contenitore decide la disposizione generale, ed è qui che si concentra il generatore perché è dove vive la maggior parte delle decisioni di layout Ecco cosa fa ogni proprietà del contenitore.
| Proprietà | Cosa controlla | Valori comuni |
|---|---|---|
flex-direction |
L'asse principale e la sua direzione | row, column, row-reverse, column-reverse |
flex-wrap |
Se gli elementi traboccano su nuove linee | nowrap, wrap, wrap-reverse |
justify-content |
Spaziatura lungo l'asse principale | flex-start, center, space-between, space-evenly |
align-items |
Posizionamento sull'asse trasversale | stretch, center, flex-start, baseline |
align-content |
Spaziatura delle linee avvolte sull'asse trasversale | stretch, center, space-between |
gap |
Spazio tra gli oggetti | qualsiasi lunghezza, per esempio 16px |
Il modello mentale che fa questo bastone è l'idea a due assi dalla specifica Gli elementi scorrono lungo l'asse principale, che flex-direction insiemi L'asse trasversale è sempre perpendicolare ad esso. justify-content distribuisce lo spazio sull'asse principale; align-items posizioni sull'asse trasversale Una volta flex-direction è column, l'asse principale è verticale, quindi justify-content ora impila gli elementi dall'alto verso il basso e align-items li posiziona da sinistra a destra Non è cambiato nulla delle proprietà; gli assi ruotavano sotto di loro.
Come centrare un div con flexbox?
Questa è la singola domanda flexbox più cercata, e la risposta è di tre righe Imposta il contenitore su display: flex, allora justify-content: center e align-items: center. Ciò centra il bambino sull'asse principale e sull'asse trasversale contemporaneamente, che per una riga predefinita significa centro morto orizzontalmente e verticalmente.
Nel generatore, scegli center sia per i controlli di allineamento che per le caselle campione saltare al centro dell'area di anteprima La casella di output mostra quindi
.container {
display: flex;
flex-direction: row;
flex-wrap: nowrap;
justify-content: center;
align-items: center;
}
Il motivo per cui vale la pena costruire questa ricetta facendo clic anziché memorizzando è che nel momento in cui il tuo requisito cambia anche leggermente, ad esempio vuoi che l'elemento sia appuntato in alto ma centrato orizzontalmente, cambi un menu a discesa e vedi il risultato, invece di indovinare quale dei due proprietà da modificare.
Quando conta l'alline-content?
align-content la proprietà che le persone impostano e poi si chiedono perché non succede nulla La risposta è nella specifica: influisce sul layout solo quando ci sono più linee di elementi flessibili Con flex-wrap: nowrap, ogni elemento si trova su una singola linea, quindi non c'è un insieme di linee da distribuire e la proprietà è inerte.
Il generatore codifica questa regola in modo da non poter essere ingannato da essa Quando wrap è spento, il align-content il controllo è disabilitato e la proprietà è omessa dal CSS generato interamente Accendere il wrapping e diventa attivo, e si può guardare spingere le file di elementi avvolti insieme o spargerli sull'asse trasversale Emettere la proprietà solo quando fa qualcosa mantiene l'output onesto: ogni dichiarazione nella regola copiata è uno che ha un effetto visibile sul vostro layout.
Qual è la differenza tra i valori di justify-content?
la justify-content le parole chiave sono quelle in cui un'anteprima dal vivo guadagna il suo mantenimento, perché le differenze sono spaziali e difficili da descrivere in prosa. flex-start confeziona gli articoli all'inizio dell'asse principale. center li imballa nel mezzo. space-between spinge il primo e l'ultimo elemento ai bordi e distribuisce equamente lo spazio rimanente tra gli altri, quindi non c'è spazio sui bordi esterni. space-around dà a ciascun elemento una quantità uguale di spazio su entrambi i lati, il che significa che lo spazio tra due elementi è il doppio dello spazio sui bordi. space-evenly rende uguale ogni spazio, compresi i bordi.
Leggere quel paragrafo non ti insegna quasi nulla Cliccare tra i cinque valori con cinque caselle sullo schermo ti insegna in pochi secondi, e non confonderai mai space-between di space-around ancora una volta che hai visto il comportamento dei bordi fianco a fianco Questo è l'argomento a favore della costruzione del layout mediante manipolazione piuttosto che memorizzazione, ed è lo stesso argomento dietro il mantenimento di una serie di strumenti CSS visivi vicini: il generatore gradiente E il generatore box-shadow esistono per lo stesso motivo, perché anche i gradienti e le ombre sono più facili da comporre a occhio che da scrivere alla cieca. Il caso più ampio per assemblare quel tipo di kit di strumenti è in questo pezzo sul Toolkit per sviluppatori web.
Flexbox o CSS Grid?
Questa domanda viene fuori costantemente, e l'inquadratura che si tratta di una competizione è l'errore Flexbox è unidimensionale: pone gli elementi lungo un unico asse, avvolgendo quando viene detto a, ed eccelle in file di cose di cui si desidera che il browser negozi Barre degli strumenti, barre di navigazione, gruppi di pulsanti e righe di carte sono lavori flexbox naturali CSS Grid è bidimensionale: controlla righe e colonne insieme, ed eccelle nella struttura a livello di pagina in cui si desidera tracce esplicite.
Nei progetti reali nidificano costantemente Una griglia definisce le regioni della pagina e un contenitore flessibile dispone gli elementi all'interno di una di quelle regioni L'apprendimento di flexbox accuratamente non rende ridondante la griglia e viceversa; ti rende fluente nello strumento adatto a ciascun lavoro Un generatore è un modo veloce per raggiungere quella fluidità per il caso unidimensionale e, una volta che le proprietà del contenitore sono di seconda natura, leggere e scrivere layout flessibili tramite blocchi manuali che necessitano di un riferimento.
Come faccio a utilizzare il Flexbox Generator?
Il flusso rispecchia il modo in cui pensi a un layout.
- Scegliere
flex-directione se gli elementi devono avvolgere Questo imposta gli assi e il comportamento di overflow, le due decisioni tutto il resto dipende da. - Imposta allineamento. Regolare
justify-contentsull'asse principale ealign-itemssull'asse trasversale fino a quando l'anteprima corrisponde alla disposizione nella tua testa. - Spaziatura di sintonizzazione Impostare il
gaptra gli elementi con il cursore e quando l'avvolgimento è attivo, impostarealign-contentper distanziare le linee. - Copia il CSS. La regola generata ha come target un
.containerclasse e aggiornamenti in diretta Copialo in un clic e incollalo nel tuo foglio di stile.
È anche possibile aggiungere o rimuovere elementi di anteprima per testare il comportamento di un layout sotto contenuti diversi A space-between navbar sembra a posto con tre elementi e molto diverso con sette che avvolgono, e essere in grado di cambiare il conteggio mentre si guarda è come si cattura che prima che raggiunga la produzione.
Il gap sostituisce i margini per la spaziatura?
Per lo più, sì, ed è un vero miglioramento Prima gap era supportato in contenitori flessibili, distanziare gli elementi significava aggiungere margini a ciascun bambino e quindi combattere il margine extra sul primo o sull'ultimo, solitamente con a :last-child override o un margine negativo sul genitore. gap imposta direttamente lo spazio tra gli elementi, si applica anche tra le linee avvolte e non aggiunge nulla sui bordi esterni, quindi l'intera classe di bug del margine del bordo scompare.
Il generatore tratta gap come controllo di prima classe con un cursore di pixel, e omette la dichiarazione quando il gap è zero in modo che l'uscita rimanga minima Per il lavoro di produzione, gap sui contenitori flessibili è ben supportato nei browser attuali, quindi raramente c'è un motivo per tornare indietro per l'approccio del margine Se stai convertendo un valore di spaziatura tra le unità mentre lavori, il Convertitore di unità CSS maniglie il px a rem aritmetica senza calcolatrice.
Quali sono i limiti del CSS generato?
Il generatore produce la regola del contenitore Non imposta le proprietà per elemento come flex-grow, flex-shrink, o flex-basis, che controllano il modo in cui i singoli elementi si espandono e si contraggono per riempire lo spazio Quelle sono decisioni a livello di elemento che dipendono dal tuo contenuto specifico, e per la maggior parte dei layout le proprietà del contenitore plus flex: 1 sugli elementi che dovrebbero crescere è tutto ciò di cui hai bisogno Quando hai bisogno di un controllo preciso per elemento, la regola del contenitore generato è ancora la base corretta su cui costruire.
L'output utilizza proprietà standard e non fissate I prefissi del fornitore per flexbox erano necessari per i browser che sono anni senza supporto, quindi un foglio di stile moderno non dovrebbe portarli, e aggiungerli oggi è rumore Il CSS generato è pronto per la produzione come scritto, che è il punto: si lascia con una regola che si può incollare, non uno schizzo di partenza che devi finire Per il più ampio insieme di piccole utilità che fanno funzionare front-end più velocemente, questo rundown di Strumenti di produttività per sviluppatori è un buon compagno, così come lo è il guida generatore gradiente se il CSS visivo è la parte che si desidera accelerare.
Quali layout comuni posso costruire con esso?
Una manciata di ricette coprono la maggior parte del lavoro quotidiano flexbox, e ognuno è di pochi clic nel generatore Una barra di navigazione con un logo a sinistra e collegamenti a destra è justify-content: space-between di align-items: center su una riga. Un eroe perfettamente centrato, il classico & quot;centra una casella sulla pagina, & quot; è justify-content: center e align-items: center. Una pila verticale di campi modulo è flex-direction: column con un gap per una spaziatura coerente, che è più pulita dei margini su ogni campo Una riga di carte reattiva che si avvolge a nuove linee su schermi stretti è una riga con flex-wrap: wrap e un gap, allora flex: 1 sulle carte stesse in modo che crescano per riempire la fila.
Il valore di costruire questi nel generatore piuttosto che copiarli dalla memoria è che si vedono immediatamente i casi limite. UN space-between navbar con un solo elemento perni quell'elemento all'inizio, che può sembrare un bug fino a quando non lo capisci space-between non ha nulla da distribuire con un singolo elemento Una riga di carte da regalo si comporta in modo diverso a due carte contro sei, e il conteggio degli oggetti regolabile preview's ti consente di controllare entrambi prima di spedire Costruire il layout mediante manipolazione significa che i casi sorprendenti emergono mentre sei ancora nello strumento, non dopo che un utente li ha segnalati.
Una volta che una ricetta è nelle dita, smetti di aver bisogno del generatore per essa e scrivi direttamente le cinque righe Questo è lo stato finale sano Lo strumento è un insegnante tanto quanto un produttore: ogni layout che costruisci cliccando è uno che capisci un po 'meglio la prossima volta che lo scrivi a mano, che è esattamente come una buona utilità visiva dovrebbe rendersi gradualmente inutile per le basi rimanendo a portata di mano per i casi infestanti.
FAQ
Che cosa è un generatore di flexbox CSS?
Un generatore di flexbox CSS è uno strumento visivo che consente di impostare le proprietà del contenitore flex e copiare il CSS risultante. Regola il contenuto di giustificazione, gli elementi di allineamento, la direzione, l'avvolgimento e lo spazio, vedi un'anteprima dal vivo e incolla la regola generata nel foglio di stile.
Come centrare un div con flexbox?
Imposta il contenitore da visualizzare: flex, quindi justify-content: center e allinea-items: center Che centra gli elementi sia sull'asse principale che su quello trasversale In questo strumento, scegli il centro per entrambi i controlli di allineamento e copia il CSS.
Qual è la differenza tra justify-content e allinea-elementi?
justify-content distribuisce gli elementi lungo l'asse principale, che è orizzontale per una riga e verticale per una colonna Allineare-elementi posiziona gli elementi sull'asse trasversale, perpendicolare all'asse principale Modifica degli scambi di direzione flessibile quale asse ciascuno controlla.
Quando ha effetto l'alline-content?
align-content influisce sul layout solo quando gli elementi si avvolgono su più di una riga, perché distanzia quelle linee sull'asse trasversale Con flex-wrap impostato su nowrap c'è una singola riga, quindi la proprietà non fa nulla e questo strumento la omette dall'output.
Cosa fa la proprietà gap in flexbox?
gap imposta uno spazio coerente tra gli elementi flessibili senza aggiungere margini a ciascun elemento Si applica tra gli elementi sulla stessa linea e tra le linee avvolte ed evita i problemi di margine del bordo creati dalla spaziatura basata sul margine.
Qual è la differenza tra flex e inline-flex?
display: flex rende il contenitore una scatola a livello di blocco che prende tutta la larghezza disponibile Display: inline-flex lo rende una scatola a livello inline che si trova nel flusso di testo ed è larga solo quanto il suo contenuto, mentre entrambi dispongono i loro figli con le stesse regole flex.
Flexbox sostituisce CSS Grid?
No. Flexbox è un modello unidimensionale per la posa di oggetti lungo un unico asse, ideale per barre degli strumenti, navigazione e righe di carte CSS Grid è bidimensionale per righe e colonne insieme Sono complementari e spesso utilizzati nello stesso layout.
Il CSS generato è sicuro da usare in produzione?
Sì. Flexbox è supportato in ogni browser moderno e lo strumento emette proprietà CSS standard e non fissate Tutta l'elaborazione avviene nel browser, quindi non viene caricato nulla e lo strumento funziona offline una volta caricato.
