Flexbox in CSS & HTML (Tutorial) - sviluppare layout responsivi

Questo è ciò che ti aspetta nel corso su Flexbox in CSS ed HTML.

Che cos'è il layout Flexbox e perché dovrebbe essere utilizzato?

Qui viene avviato il progetto nel quale verrà poi lavorato in seguito.

Qui presento la struttura di esempio e le funzionalità di debug integrate in VS Code con gli strumenti MS Edge. Inoltre, in questo video viene attivato per la prima volta il layout Flexbox e impostata la direzione.

Come dividere equamente o in proporzioni specifiche lo spazio nel layout Flexbox?

Un piccolo esercizio che non si può evitare un po' di matematica (semplice).

Qui presento un layout orizzontale con due barre laterali che si adatta in modo responsivo alla larghezza.

Gli elementi figlio possono essere allineati lungo l'asse trasversale del container flessibile. Ecco come è possibile impostarlo.

Non solo nel contenitore è possibile impostare l'allineamento di tutti gli elementi figli, con align-self è possibile regolare in modo diverso anche gli elementi singoli.

Un piccolo esercizio per l'allineamento individuale con un dado.

Non solo lungo l'asse trasversale è possibile allineare in un container flessibile, ma è anche possibile regolare molto dell'allineamento lungo l'asse principale. ;-)

Un piccolo esempio di come allineare lungo l'asse principale per un layout comune possa essere molto utile.

Chi vuole essere flessibile deve essere in grado di specificare le dimensioni degli elementi figlio indipendentemente dalla larghezza o dall'altezza specifica. Per fortuna c'è la proprietà flex-basis-, con la quale è possibile raggiungere questo obiettivo. Modificando la flex-direction, da una larghezza si trasforma in un'altezza e viceversa. 

Di quanto un elemento dovrebbe espandersi se c'è più spazio disponibile rispetto a quanto specificato da flex-basis? Questo può essere regolato in modo mirato con flex-grow.

Di quanto dovrebbe restringersi un elemento se lo spazio disponibile è inferiore rispetto a quanto specificato da flex-basis? Questo può essere regolato in modo specifico con flex-shrink. 

Gli elementi figlio non solo possono contrarsi quando c'è meno spazio disponibile, ma possono anche essere spezzati dal contenitore. Come fare ciò con flex-wrap, lo mostro in questo video.

flex-direction e flex-wrap possono essere combinati nella proprietà flex-flow. Ha senso anche se si desidera impostare solo flex-direction, poiché flex-flow è più breve. ;-)

Un compito su flex-wrap.

Distanza deve essere presente a volte, per non rendere troppo scomodo all'occhio umano. Per fortuna c'è una proprietà CSS chiamata gap, che lo fa in modo efficiente nei figli elementi di un contenitore flessibile.

Bisogna essere ordinati, specialmente nelle interfacce web, poiché devono essere facilmente utilizzabili. L'ordine deve essere talvolta definito individualmente, senza spostare gli elementi nel DOM. Per questo scopo, la proprietà CSS order è particolarmente adatta, con la quale è possibile cambiare facilmente l'ordine visibile degli elementi.

Testiamo se avete capito l'ordine corretto. Qui c'è addirittura una seconda possibilità di ottenere lo stesso risultato, ma sicuramente ve ne siete accorti anche voi.

Spesso capita che si vogliano centrare gli elementi e soprattutto il testo in modo orizzontale e verticale (!). Quello che prima era una fatica prima di Flexbox, con Flexbox è un gioco da ragazzi.

Chi non conosce il 3 colone? Se questo si adatta ancora allo spazio disponibile, manca davvero poco al design responsivo.

Esistono siti web senza moduli? Se sì, allora non sono molti. È quindi molto importante organizzarli in modo accattivante, cosa che fortunatamente non è un problema con Flexbox.

Molto spesso ci si trova ad affrontare layout annidati, ma con Flex-Layout nemmeno quelli sono più una sfida significativa.

Nel frattempo ci sono client di chat web come sabbia nel mare e con i chatbot AI ne sono stati aggiunti ancora di più. Ma come si può realizzare una chat con Flexbox? Lo mostro in questo video.

Almeno dal Web 2.0 si trova quasi su ogni sito web una galleria. In questo video spiego come un layout del genere può essere implementato splendidamente ad esempio con Flexbox.

Ora dovrebbe essere tutto chiaro per quanto riguarda il layout flessibile. Infine, descriverò cosa dovreste aver imparato, cosa potreste ancora fare e quali sono le altre belle possibilità di layout CSS.