Cos'è Flexbox in CSS?

Quando si progetta un sito Web reattivo, si desidera che i tuoi elementi modifichino il loro comportamento come larghezza, altezza, risoluzione, orientamento, ecc. Secondo il tipo di dispositivo che utilizza il sito Web. Questo post discute come puoi rendere i tuoi elementi reattivi utilizzando il layout Flexbox. I soggetti in discussione sono i seguenti.

1. Cos'è Flexbox
2. Sfondo
3. Componenti Flexbox
4. Asse Flexbox
5. Proprietà Flexbox

Cos'è Flexbox

CSS Flexbox è un modello di layout che consente una disposizione efficiente e dinamica di elementi. Questo layout è unidimensionale e consente il posizionamento di elementi all'interno di un contenitore con spazio ugualmente distribuito.

Questo layout rende gli elementi reattivi, il che significa che gli elementi cambiano il loro comportamento in base al tipo di dispositivo che li mostra. Rende gli elementi flessibili e fornisce loro una posizione adeguata e la simmetria.

Flexbox è stato introdotto nella versione 3 CSS per disporre gli elementi in un contenitore in modo più efficiente e dinamico. Prima di Flexbox, inizialmente c'erano quattro metodi di layout che abbiamo elencato di seguito.

1. Bloccare
   Ai fini della creazione di sezioni in una pagina Web, viene utilizzato il layout del blocco.
2. In linea
   È un metodo di layout che viene utilizzato per il testo.
3. Tavolo
   Questo viene utilizzato per una tabella con dati bidimensionali.
4. Posizionato
   Questo è usato per una posizione definita di un elemento.

Ora discuteremo di vari componenti di una Flexbox.

Componenti Flexbox

Un Flexbox è costituito da due componenti che abbiamo spiegato di seguito.

1. Flex-Container
   Questo componente di una Flexbox definisce le proprietà dell'elemento antenato impostando il suo display su Flex o inline-Flex.
2. Flex-Items
   Descrive le proprietà degli elementi successivi, inoltre, possono esserci numerosi elementi presenti all'interno di un contenuto di flessione flessibile.

Ecco una rappresentazione visiva di una Flexbox.

Asse Flexbox

Quando si tratta del layout Flexbox, ci sono due assi che dovrebbero essere curati. Questi assi sono stati elencati di seguito.

1. Asse principale
2. Asse incrociato

Entrambi gli assi sono spiegati in dettaglio di seguito.

Asse principale

L'asse principale (da sinistra a destra) è impostato dal Direzione flessibile proprietà. Questo asse può rendere quattro valori che sono; revoca di riga, reversa di riga, colonna e colonna.

Nel caso dei primi due valori che sono riga, E revietto di riga, Flexbox presenta una direzione in linea, il che significa che il contenitore flessibile e gli articoli saranno allineati orizzontalmente. Mentre, per il colonna, E revoce della colonna valori La direzione della Flexbox sarà bloccata o in parole più semplici, il contenitore e gli elementi saranno disposti verticalmente.

Asse incrociato

La direzione di questo asse è perpendicolare all'asse principale. Se la direzione dell'asse principale è regolata riga O revietto di riga Quindi l'asse incrocio si muoverà lungo le colonne verso il basso, mentre, nel caso della colonna, e il retro della colonna si muoverà lungo le righe.

Entrambi gli assi hanno un inizio, un punto finale e una certa lunghezza tra questi punti.

Proprietà Flexbox

Di seguito sono state fornite le proprietà di un Flexbox.

1. Schermo
Visualizza un elemento come Flexbox.

2. Direzione flessibile
Questa proprietà definisce la direzione degli elementi in un contenitore flessibile.

3. giustificare il contenuto
Se gli elementi in una Flexbox non consumano completamente lo spazio orizzontale, questa proprietà li allinea attraverso l'asse principale.

4. allineare
Se gli elementi in una Flexbox non consumano completamente lo spazio verticale, questa proprietà li allinea attraverso l'asse incrociato.

5. Flex-wrap
Se non c'è molto spazio su una singola linea flessibile, questa proprietà decide se avvolgere gli elementi o meno.

6. contenuto align
Altera il comportamento della proprietà Flex-Wrap ed è praticamente simile alla proprietà ALIGN-elementi con l'unica differenza che allinea le linee flessibili piuttosto che gli elementi flessibili.

7. Flex-flow
Una proprietà stenografica per la direzione flessibile e la flessione.

8. ordine
Definisce l'ordine di un elemento flessibile rispetto ad altri elementi presenti in una Flexbox.

9. allinearsi
Questa proprietà sovrascrive la proprietà ALIGN-ETSEMS e viene utilizzata su elementi flessibili.

10. flettere
Dichiara la lunghezza degli elementi flessibili rispetto ad altri elementi presenti in una Flexbox.

Vediamo un esempio.

Esempio
Di seguito ti abbiamo mostrato un esempio di come creare una Flexbox.

Html

Articolo
Articolo
Articolo<
Articolo

Qui abbiamo creato un contenitore di div con la classe "flexbox" e nidificando altri quattro contenitori di div.

CSS

.Flexbox
display: flex;
Background-color: Aquamarine;

Prima di tutto stiamo assegnando al contenitore Div principale un display Flex per renderlo una Flexbox, quindi gli stiamo dando un po 'di colore di sfondo.

CSS

.Flexbox div
Background-color: LightGrey;
Margine: 15px;
imbottitura: 20px;
Font-size: 35px;

Infine, stiamo accontentando gli articoli Flex presenti nella Flexbox utilizzando varie proprietà CSS.

Produzione

Un Flexbox è stato generato con successo.

Conclusione

Un Flexbox è un modello di layout che organizza elementi in modo efficiente e dinamico, dando loro spazi distribuiti uguali all'interno di un contenitore. Questo layout rende gli elementi reattivi, il che significa che gli elementi cambiano il loro comportamento in base al tipo di dispositivo che li mostra. È costituito da un contenitore flessibile e articoli considerati come componenti. Inoltre, ha assi principali e cross e presenta più proprietà. Questo articolo copre tutti i dettagli necessari su un Flexbox insieme a un esempio adatto.