Modello di layout Flexbox CSS | Spiegato
Questo articolo ti aiuterà nei seguenti aspetti del modello CSS Flexbox:
- Cos'è il modello di layout CSS Flexbox
- Cos'è un contenitore CSS Flex
- Caratteristiche del modello Flexbox
- Concetto di base del modello di layout Flexbox CSS
- Proprietà Flexbox
- Esempi
Quindi, iniziamo!
Cos'è il modello di layout CSS Flexbox
È un modulo di layout flessibile disponibile in CSS3 che offre un modo semplice e chiaro per organizzare elementi flessibili all'interno di un contenitore. Ci aiuta a progettare il layout reattivo.
Cos'è un contenitore CSS Flex
Per lavorare con il modello Flexbox, prima dobbiamo capire cos'è un contenitore Flex e per farlo, consideriamo la figura di seguito:
Nel frammento sopra, l'area grigia rappresenta un contenitore flessibile mentre l'articolo 1, l'articolo 2, ecc. sono i suoi oggetti. Quindi, possiamo dire che il contenitore Flex è una scatola/contenitore in grado di contenere più elementi flessibili.
Caratteristiche del modello Flexbox
Il modello CSS Flexbox Layout fornisce numerose funzionalità, alcune sono elencate di seguito:
- Nel modello di layout Flexbox CSS, non ci sono galleggianti.
- CSS Flexbox offre un layout reattivo e adatto ai dispositivi mobili.
- I margini del contenitore Flex non crollano con i margini del suo contenuto.
- Il posizionamento dell'elemento figlio è molto semplice nel modello Flexbox.
- L'ordine dell'elemento può essere modificato facilmente senza modificare l'HTML di origine.
Concetto di base del modello di layout Flexbox CSS
Alcuni dei concetti di base del modello di layout Flexbox CSS sono elencati di seguito:
- Il modello CSS Flexbox ha la possibilità di alterare l'altezza e la larghezza dell'elemento per adattarsi al meglio all'interno dello spazio libero disponibile del contenitore.
- FlexBox è agnostico della direzione, il che significa che gli elementi della Flexbox possono essere disposti in orizzontale e verticalmente.
Proprietà Flexbox
Per progettare un layout reattivo, una vasta gamma di proprietà flex è disponibile in CSS3 come descritto nelle tabelle di seguito:
Tabella 1
| Proprietà | Descrizione |
|---|---|
| Schermo | Determina il tipo di contenitore flessibile, i.e., in linea, blocco. |
| Direzione flessibile | Specifica la direzione degli oggetti all'interno del contenitore come il fondo superiore, a sinistra-destra, ecc. |
| Flex-wrap | Determina se gli oggetti devono essere avvolti o meno. |
| Flex-flow | Fornisce le funzionalità sia di WRAP FLEX che di flessione. |
| giustificare il contenuto | Allinea gli articoli/elementi lungo l'asse principale. |
| allineare | Allinea gli elementi lungo l'asse incrocio. |
| contenuto align | Allinea le linee del contenitore flessibile. |
| spacco | Controlla esplicitamente gli spazi tra gli articoli flessibili. |
Tavolo 2
| Proprietà | Descrizione |
|---|---|
| ordine | Controlla l'ordine degli elementi figlio all'interno del contenitore Flex. |
| Flex-Crow | Determina il fattore di crescita per un elemento flessibile. |
| Flex-Shrink | Determina il fattore di restringimento per elementi figlio/elementi flessibili. |
| Flex-Basis | Determina la dimensione predefinita dell'elemento figlio/elemento flessibile. |
| flettere | È usato per ottenere le funzionalità di tre proprietà i.e. Flex-Crow, Flex-Shrink e Flex-Basis. |
| allinearsi | Consente di sovraccaricare l'allineamento predefinito (lungo l'asse incrociato). |
Le proprietà descritte nella Tabella 1 sono note come Container Flex O elemento genitore Proprietà, mentre quelle descritte nella Tabella 2 sono note come Flex Articoli O elemento bambino proprietà.
Esempi
In questa sezione, implementeremo praticamente le proprietà del contenitore Flexbox e FlexBox sopra descritte.
Esempio Flexbox
Primo elemento
Secondo articolo
Terzo elemento
Quarto articolo
Quinto elemento
Nello snippet di codice sopra, abbiamo utilizzato vari contenitori flessibili e proprietà di elementi flessibili come display, direzione flessibile, elementi di allineamento, gap e crescita flessibile che imposterà il display flessibile, la direzione del recupero della riga, l'allineamento allungato, le righe 5px e Gap delle colonne 50px rispettivamente e il terzo elemento crescerà due volte più velocemente di altri elementi:
L'output verifica il funzionamento delle proprietà CSS Flexbox.
Conclusione
Il modello CSS Flexbox offre un modo semplice e pulito per organizzare elementi Flexbox all'interno di un contenitore. Fornisce numerose caratteristiche come il design reattivo, il semplice allineamento degli elementi, ecc. Inoltre, numerose proprietà possono essere utilizzate per progettare e allineare gli articoli in un modo migliore, come direzione flessibile, wrap flex, allineate, ordine, crescita flessibile, ecc. Questo articolo ha discusso del modello di layout Flexbox, del contenitore Flex e delle loro proprietà.