Tutto su Le proprietà del flexbox

Il concetto alla base delle proprietà di Flexbox è quello di fornire al contenitore la possibilità di modificare automaticamente la larghezza, l'altezza e l'ordine dei suoi articoli per riempire al meglio lo spazio disponibile. Questo può essere davvero utile per contenere oggetti con dimensioni e dispositivi dello schermo diversi. Gli elementi vengono espansi per riempire qualsiasi spazio libero o ridotti per evitare un overflow.

Griglia Flexbox CSS per principianti

Il CSS è una delle prime e più semplici cose da imparare nello sviluppo e nella progettazione web, ma non confondere la sua semplicità con la mancanza di funzionalità. Ha una serie di incredibili caratteristiche e capacità pronte per essere sfruttate, una delle quali è il suo modulo di layout relativamente nuovo: le proprietà Flexbox.

Le proprietà di Flexbox sono uno dei layout più recenti disponibili per CSS3 e c'è molto da imparare al riguardo. Qui, ci occupiamo direttamente del layout e di come usarlo. Prima di iniziare, tuttavia, ecco un piccolo retroscena sulle proprietà di Flexbox:

Quali sono le modalità di layout?

In parole povere, la griglia CSS Flexbox è una modalità di layout. CSS ha un numero di modalità di layout esistenti. La modalità di layout del blocco (come display: block) è in circolazione da molto tempo. I layout a blocchi sono una buona scelta per lo stile di documenti completi. In effetti, un browser web considera diversi elementi come div e paragrafi come livello di blocco per impostazione predefinita.

Un'altra modalità di layout comune è in linea. Il tag forte, il tag di input e il tag anchor sono esempi di elementi a livello inline. Gli strumenti per sviluppatori di Google Chrome ti consentono persino di visualizzare lo "stile calcolato" di un elemento per determinare le proprietà e i valori CSS che sono stati applicati agli elementi non esplicitamente impostati dallo sviluppatore.

Il layout relativamente più recente delle proprietà di Flexbox (box flessibile) è stato progettato come un metodo più efficiente di disposizione, allineamento e distribuzione dello spazio tra gli articoli container, anche se la dimensione di questi articoli è dinamica o sconosciuta. Da qui il termine "flessibile".

Il concetto di proprietà Flexbox

La cosa più importante delle proprietà di Flexbox è che è indipendente dalla direzione. Mentre il layout del blocco è basato in verticale e il layout in linea è basato in orizzontale, Flexbox non lo è. Block e inline funzionano bene nelle giuste situazioni, ma mancano della flessibilità necessaria per supportare applicazioni complesse o di grandi dimensioni, in particolare quando si tratta di cambiare orientamento, allungamento, restringimento, ridimensionamento e modifica delle dimensioni degli elementi.

Dove vengono utilizzate le proprietà Flexbox?

Come qualsiasi altro layout CSS, Flexbox viene utilizzato al meglio in determinate situazioni. In particolare, è appropriato per layout e componenti su piccola scala di un'applicazione. Per i layout in scala più grande, un layout a griglia sarebbe la scelta più saggia.

Perché è preferito Flexbox?

Molti sviluppatori e designer preferiscono le proprietà Flexbox ogni volta che possono (a volte troppo spesso!). Questo perché le proprietà di Flexbox sono più facili da usare; il posizionamento degli elementi è molto più semplice, quindi puoi ottenere layout più complessi con meno codifica. In altre parole, semplifica il processo di sviluppo.

Una guida alle proprietà di Flexbox

Ora che conosci un po 'le proprietà di Flexbox e come e perché funziona, ecco una guida dettagliata al layout. Il modello del layout è costituito da un contenitore padre, chiamato anche "contenitore flessibile". I bambini immediati da questo contenitore sono chiamati "oggetti flessibili".

Il layout ha subito diverse iterazioni e modifiche alla sintassi nel corso degli anni da quando è stata creata la sua prima bozza nel 2009. L'ultima specifica Flexbox è supportata sui seguenti browser Web:

  • Opera 17+
  • Internet Explorer 11+
  • Mozilla Firefox 28+
  • Google Chrome 29+
  • Apple Safari 6.1+
  • Android 4.4+
  • iOS 7.1+

La terminologia utilizzata nelle proprietà Flexbox

Ecco uno sguardo alla terminologia di base utilizzata nel layout delle proprietà di Flexbox:

  • Display: questo comando viene utilizzato per definire il contenitore flessibile. Potrebbe essere in linea o bloccare, a seconda di Definisce anche il contenuto flessibile per tutti gli elementi all'interno del contenitore. Esempio:

.container (

display: flessibile; / * o inline-flex * /

)

  • Ordine: gli articoli Flex sono disposti in base all'ordine di origine per impostazione predefinita, ma la proprietà 'order' può controllare l'ordine in cui gli articoli compaiono all'interno del container. Esempio:

.articolo (

ordine: ;

)

  • Flex-direction: questo ordine imposta l'asse principale, definendo la direzione in cui gli oggetti flessibili vengono posizionati all'interno del contenitore. Gli articoli Flex possono essere disposti principalmente in direzioni verticali o orizzontali. Esempio:

.container (

direzione flessibile: riga | riga-retromarcia | colonna | colonna-retromarcia;

)

  • Crescita flessibile: questo ordine definisce la capacità dell'elemento flessibile di ingrandirsi automaticamente se ha spazio. Può accettare un valore senza unità come proporzione. Questo valore determina la quantità di spazio che l'oggetto dovrebbe occupare all'interno del contenitore flessibile. Ad esempio, se tutti gli articoli hanno flex-grow impostato su 1, lo spazio rimanente all'interno del contenitore verrà equamente distribuito a tutti i bambini. Se il valore è 2, lo spazio rimanente occuperà due volte più spazio del resto. Esempio:

.articolo (

flex-grow:; / * predefinito 0 * /

)

  • Riduzione flessibile: ciò fa esattamente l'opposto della crescita flessibile, in quanto riduce gli elementi flessibili quando necessario. Esempio:

.articolo (

restringimento:; / * predefinito 1 * /

)

  • Base flessibile: questo ordine definisce una dimensione predefinita degli elementi prima della distribuzione del resto dello spazio. Potrebbe essere una lunghezza, come 5rem o 20%, o una parola chiave. La parola chiave "auto" indica che la larghezza e l'altezza dell'elemento devono essere misurate e la parola chiave "contenuto" indica che l'articolo è dimensionato in base al suo contenuto. Esempio:

.articolo (

base flessibile: | auto; / * auto predefinita * /

)

  • Flex: questa è una scorciatoia combinata per tutte e tre le proprietà di cui sopra: flex-grow, flex-base e flex-shrink. L'impostazione predefinita è "0 1 auto".

.articolo (

flex: nessuno | (||)

)

  • Contenuto giustificato: questo ordine definisce l'allineamento dell'asse principale e aiuta a distribuire lo spazio libero aggiuntivo se ne è rimasto uno quando gli oggetti non sono flessibili o hanno raggiunto la dimensione massima. Questo aiuta anche a controllare l'allineamento dell'elemento in caso di overflow.

.container (

contenuti giustificati: flex-start | estremità flessibile | centro | spazio-tra | spazio intorno;

)

  • Allinea elementi: viene utilizzato per definire il comportamento predefinito del layout degli elementi flessibili sull'asse trasversale della linea corrente. È essenzialmente una versione del "contenuto giustificato" sull'asse trasversale, che è perpendicolare all'asse principale. Esempio:

.container (

align-items: flex-start | estremità flessibile | centro | baseline | allungare;

)

  • Allinea contenuto: questo ordine allinea le linee del contenitore nel caso in cui vi sia spazio aggiuntivo sull'asse trasversale. È simile a "justify-content", ma per l'asse trasversale anziché l'asse principale. Se esiste solo una riga di articoli flessibili, questa proprietà non ha alcun effetto. Esempio:

.container (

align-content: flex-start | estremità flessibile | centro | spazio-tra | spazio-around | allungare;

)

Utilizzo delle proprietà di Flexbox

Per utilizzare il layout Flexbox, puoi semplicemente impostare la proprietà display sull'elemento parent HTML, come di seguito:

.flex-container (

display: -webkit-flex; / * Safari * /

display: flessibile;

)

Se si preferisce visualizzare come un elemento inline, è possibile scrivere in:

.flex-container (

display: -webkit-inline-flex; / * Safari * /

display: inline-flex;

)

Questa proprietà è necessaria solo per essere impostata sul contenitore flessibile padre e sui suoi elementi flessibili immediati. I bambini contenitore diventeranno automaticamente oggetti flessibili.

Corsi consigliati

  • Corso online su jQuery gratuito
  • Corso online su JS angolare libero
  • Formazione online su Mudbox
  • Formazione per la certificazione in Ruby gratuito

Proprietà Flexbox - Proprietà del contenitore Flex

Esistono molti modi per raggruppare le proprietà di Flexbox e il modo più semplice per conoscerle è suddividerle nelle proprietà del contenitore e dell'oggetto Flex. Abbiamo appena coperto alcune delle proprietà del contenitore flessibile sopra. Diamo un'occhiata al resto:

  • Direzione flessibile: riga o colonna

La proprietà flex-direction può essere disposta come colonne verticalmente o righe orizzontalmente. Con la direzione della riga, gli elementi flessibili sono impilati da sinistra a destra per impostazione predefinita. Il contrario di riga cambia questa direzione da destra a sinistra. La direzione della colonna è dall'alto verso il basso per impostazione predefinita e la funzione di inversione della colonna inverte la direzione dal basso verso l'alto.

  • Flex-wrap: nowrap o wrap

La proprietà di avvolgimento flessibile controlla se i figli del contenitore flessibile sono disposti in più o singole linee e la direzione in cui sono impilate le nuove linee. Il valore nowrap vede gli elementi flessibili visualizzati in una singola riga, ridotti per adattarsi alla larghezza del contenitore per impostazione predefinita. Il valore di avvolgimento mostra gli elementi flessibili visualizzati in diverse righe in una direzione da sinistra a destra o dall'alto verso il basso. È possibile aggiungere il ritorno a capo per modificare anche l'ordine. Il valore predefinito è nowrap.

  • Flex-flow

Questa proprietà è fondamentalmente una scorciatoia per impostare insieme le proprietà flex-direction e flex-wrap. Il valore predefinito è "row nowrap". Esempio:

.flex-container (

flusso flessibile: ||

)

  • Giustificare-content

La proprietà justify-content ha quattro valori: flex-start per allineare gli oggetti sul lato sinistro del contenitore; estremità flessibile per allineare gli oggetti sul lato destro; centro per allinearlo al centro; spazio tra di essi per allineare gli oggetti con uguale spaziatura tra loro, con il primo e l'ultimo oggetto allineati ai bordi del contenitore; e spazio intorno per allineare l'elemento flessibile con uguale spaziatura attorno ad essi, compresi il primo e l'ultimo elemento. Flex-start è il valore predefinito.

  • Align-articoli

Questa proprietà ha cinque valori: allunga per ridimensionare gli oggetti flessibili per riempire l'intera larghezza o altezza dall'inizio alla fine del contenitore; flex-start per impilare gli oggetti all'inizio incrociato; estremità flessibile per impilare gli oggetti all'estremità trasversale; centro per allineare gli elementi al centro dell'asse trasversale; e baseline per allineare gli elementi in modo che le loro baseline siano allineate. Stretch è il valore predefinito.

  • Align-contenuti

Questa proprietà allinea le linee di un contenitore flessibile quando vi è spazio aggiuntivo nell'asse trasversale. I suoi valori sono: allungare per distribuire lo spazio dopo ogni riga; inizio flessibile per impilare gli oggetti verso l'inizio incrociato; estremità flessibile per impilare gli oggetti verso la parte trasversale; centro per impilare gli oggetti al centro dell'asse trasversale; spazio intorno per distribuire equamente lo spazio attorno agli oggetti flessibili. Il valore predefinito è tratto.

Proprietà Flexbox: proprietà degli oggetti Flex

Ora che conosci le proprietà del contenitore Flexbox, diamo un'occhiata alle proprietà dell'articolo:

  • Ordine

Questa proprietà controlla l'ordine di apparizione dei figli del contenitore flessibile. Sono ordinati all'interno del contenitore flessibile per impostazione predefinita.

.flex-item (

ordine: ;

)

Puoi riordinare gli oggetti flessibili senza dover ristrutturare il codice HTML. Il valore di default è zero.

  • Align-auto

Questa proprietà consente di sovrascrivere l'allineamento predefinito di un elemento flessibile specifico. È possibile utilizzare i valori di align-items per questa proprietà.

.flex-item (

align-self: auto | avvio flessibile | estremità flessibile | centro | baseline | allungare;

)

Il valore automatico in align-self viene calcolato dal valore degli oggetti align sull'elemento parent. Se l'elemento non ha parent, al suo posto viene utilizzato l'allungamento.

Esempi di base

Questo è tutto ciò che devi sapere per utilizzare il layout della griglia CSS Flexbox. Ora è il momento di mettere in pratica ciò che hai imparato. Ecco alcuni esempi che mostrano come tutte queste proprietà si uniscono. Cominciamo con qualcosa di assolutamente semplice:

.genitore (

display: flessibile;

altezza: 300 px;

)

.child (

larghezza: 100px;

altezza: 100 px;

margine: auto;

)

Questo è un esempio di centraggio perfetto. I valori di altezza e larghezza possono essere modificati a piacere. La chiave qui è impostare il margine su "auto" in modo che il contenitore flessibile assorba automaticamente qualsiasi spazio extra. Abbastanza semplice!

Passiamo ora ad aggiungere altre proprietà: un elenco con sei elementi di dimensioni fisse che possono essere ridimensionabili automaticamente. Devono essere distribuiti uniformemente sull'asse orizzontale.

.flex-container (

display: flessibile;

giustificare-contenuto: spazio intorno;

)

Quindi, proviamo a centrare una navigazione allineata a destra per schermi di medie dimensioni e renderlo a colonna singola su piccoli dispositivi.

/* Grande */

.navigation (

display: flessibile;

flex-flow: avvolgimento riga;

contenuti giustificati: flex-end;

)

/ * Schermi medi * /

@media all e (larghezza massima: 800px) (

.navigation (

giustificare-contenuto: spazio intorno;

)

)

/ * Piccoli schermi * /

@media all e (larghezza massima: 500px) (

.navigation (

direzione flessibile: colonna;

)

)

È ora di fare un ulteriore passo avanti! Proviamo un layout mobile-first con tre colonne, con piè di pagina e intestazione a larghezza intera e indipendenti dall'ordine di origine.

.wrapper (

display: flessibile;

flex-flow: avvolgimento riga;

)

/ * Diciamo che tutti gli articoli hanno una larghezza del 100% * /

.header, .main, .nav, .aside, .footer (

flex: 1 100%;

)

/ * Facciamo affidamento sull'ordine di origine per l'approccio mobile-first * /

/ * Schermi medi * /

@media all e (larghezza minima: 600px) (

.aside (flex: 1 auto; )

)

/ * Grandi schermi * /

@media all e (larghezza minima: 800px) (

.main (flex: 2 0px; )

.aside-1 (ordine: 1; )

.main (ordine: 2; )

.aside-2 (ordine: 3; )

.footer (ordine: 4; )

)

Conclusione

Questi sono solo alcuni esempi di base. Puoi giocare molto di più con i layout di griglia CSS Flexbox e sono assolutamente preziosi se vuoi creare una pagina web reattiva.

Articoli consigliati

Quindi, ecco alcuni articoli che aiuteranno a ottenere maggiori dettagli sulle proprietà del flexbox, sul codice flexbox e anche sulla griglia del css flexbox, quindi basta passare attraverso il link che viene fornito di seguito.

  1. HTML vs XML - Principali differenze
  2. CSS3 vs CSS: come sono diversi? (Infograph)
  3. Principali differenze tra HTML e CSS
  4. HTML5 vs Flash

Categoria:

Strumenti di sviluppo Web