CONTATTACI

Blog

Flexbox: realizzare un layout responsive con CSS semplici e puliti

Flexbox è una proprietà CSS oggi giorno diffusissima, utilizzata per posizionare gli elementi della nostra pagina web in maniera pratica e veloce all’interno di un container (contenitore) genitore.

Questa proprietà ha sostituito del tutto grid, utilizzata negli anni passati per creare griglie con gli elementi.

La peculiarità di flexbox, oltre alla semplicità di utilizzo è la sua compatibilità con i browser più moderni, come ad esempio: Google Chrome, Mozilla Firefox, Edge, etc.

NB: per controllare la compatibilità delle proprietà CSS puoi utilizzare un tool all’indirizzo:  https://caniuse.com/.

Questo strumento ti mostrerà, per ogni proprietà da te ricercata, una tabella con tutte le versioni dei Browser per le quali la proprietà è compatibile.

/Users/nicoladivenere/Desktop/Schermata 2021-06-08 alle 11.49.35.png

Adesso ti mostrerò come utilizzare flexbox, attraverso degli esempi pratici.

../Schermata%202021-06-08%20alle%2012.23.52.png

Nell’esempio sopra riportato avremo gli elementi disposti uno sotto l’altro. 

../Schermata%202021-06-08%20alle%2012.48.04.png

Per disporre gli elementi sulla stessa riga (uno accanto all’altro) all’interno del container, ti basterà applicare a quest’ultimo la proprietà display con valore flex (display: flex).

../Schermata%202021-06-08%20alle%2012.55.12.png

Un’altra importante proprietà è flex-direction, che può avere due valori: row o column. Row è il valore di default, invece column ci permette di disporre gli elementi in verticale su una colonna.

../Schermata%202021-06-08%20alle%2015.00.48.png../Schermata%202021-06-08%20alle%2015.02.04.png

Gli elementi disposti sulla stessa riga (il contenitore deve possedere come regole CSS: display: flex; flex-direction: row) possono essere posizionati in maniera differente.

Per modificare la posizione degli elementi sull’asse orizzontale (x) utilizziamo la proprietà: justify-content.

Quest’ultima può avere come valore: center, spacebetween, spacearound, etc.

Utilizziamo il valore:

  • center: per allineare al centro gli elementi all’interno del contenitore;
  • spacebetween: per assegnare spazio tra gli elementi e 
  • spacearound: per assegnare lo stesso spazio prima e dopo ciascun elemento.

justify-content: center

../Schermata%202021-06-08%20alle%2015.40.06.png../Schermata%202021-06-08%20alle%2015.38.27.png

justify-content: space-between

../Schermata%202021-06-08%20alle%2015.48.32.png../Schermata%202021-06-08%20alle%2015.50.39.png

justify-content: space-around (con tre elementi per comprendere al meglio il funzionamento di space-around)

../Schermata%202021-06-08%20alle%2016.01.39.png../Schermata%202021-06-08%20alle%2016.02.02.png

A differenza di justify-content che dispone gli elementi lungo l’asse x, alignitems invece dispone gli elementi lungo l’asse y. In questo specifico caso utilizziamo center come valore.

../Schermata%202021-06-08%20alle%2016.19.26.png../Schermata%202021-06-08%20alle%2016.20.06.png

Nel caso in cui gli elementi sono disposti sulla stessa colonna, il contenitore deve possedere come regole CSS: display: flex; flex-direction: column. Per modificare la posizione degli elementi sull’asse orizzontale (x) utilizziamo la proprietà: align-items; invece per modificare la posizione degli elementi sull’asse verticale (y) utilizziamo la proprietà: justify-content. NB: esattamente il contrario di quanto fatto precedentemente.

Flexbox presenta molte altre caratteristiche e proprietà che puoi approfondire in maniera più dettagliata sul sito web: https://css-tricks.com/snippets/css/a-guide-to-flexbox/.

 

Articoli correlati

Il linguaggio HTML (Hypertext Markup Language) è uno dei più conosciuti e diffusi: lo si trova infatti praticamente in tutte le pagine web esistenti. È una scelta popolare tra i principianti che si…

Seguici su Facebook

Vuoi entrare nel mondo della programmazione?

Scopri di più sui nostri corsi!

Chiamaci al numero verde

Contattaci su WhatsApp

Contattaci senza impegno per informazioni sul corso

Pagamento rateale

Valore della rata: A PARTIRE DA 115 €/mese.

Esempio di finanziamento 

Importo finanziato: € 2440 in 24 rate da € 115 – TAN fisso 9,55% TAEG 12,57% – importo totale del credito € 2841.

Il costo totale del credito comprende: interessi calcolati al TAN indicato, oneri fiscali (imposta di bollo sul contratto 16,00 euro*) addebitati sulla prima rata, costo mensile di gestione pratica € 3,90, spesa di istruttoria € 0,00, spesa per invio rendicontazione periodica cartacea € 0,98 (o spesa per invio rendicontazione periodica cartacea € 0,00), imposta di bollo su rendicontazione periodica € 0,00. Modalità di rimborso obbligatoria: addebito diretto su c/c. La scadenza delle rate è determinata dal giorno della liquidazione del contratto; la data di scadenza delle rate è prevista il giorno 15 del mese. L’importo di ciascuna rata comprende una quota di capitale crescente e interessi decrescente secondo un piano di ammortamento “alla francese”. Offerta valida dal 01/01/2024 al 31/12/2024.

Messaggio pubblicitario con finalità promozionale. Per le informazioni precontrattuali richiedere sul punto vendita il documento “Informazioni europee di base sul credito ai consumatori” (SECCI) e copia del testo contrattuale. Salvo approvazione di Sella Personal Credit S.p.A. Aulab S.r.l. opera quale intermediario del credito NON in esclusiva.

*In fase di richiesta del finanziamento verrà proposta la facoltà di selezionare, in alternativa all’imposta di bollo sul contratto di 16,00 euro, l’imposta sostitutiva, pari allo 0,25% dell’importo finanziato.

Pagamento rateale

Valore della rata: A PARTIRE DA 210 €/mese.

Esempio di finanziamento  

Importo finanziato: € 4500 in 24 rate da € 210,03 – TAN fisso 9,68% TAEG 11,97% – importo totale del credito € 5146,55.

Il costo totale del credito comprende: interessi calcolati al TAN indicato, oneri fiscali (imposta di bollo sul contratto 16,00 euro*) addebitati sulla prima rata, costo mensile di gestione pratica € 3,90, spesa di istruttoria € 0,00, spesa per invio rendicontazione periodica cartacea € 0,98 (o spesa per invio rendicontazione periodica cartacea € 0,00), imposta di bollo su rendicontazione periodica € 0,00. Modalità di rimborso obbligatoria: addebito diretto su c/c. La scadenza delle rate è determinata dal giorno della liquidazione del contratto; la data di scadenza delle rate è prevista il giorno 15 del mese. L’importo di ciascuna rata comprende una quota di capitale crescente e interessi decrescente secondo un piano di ammortamento “alla francese”. Offerta valida dal 01/01/2024 al 31/12/2024.

Messaggio pubblicitario con finalità promozionale. Per le informazioni precontrattuali richiedere sul punto vendita il documento “Informazioni europee di base sul credito ai consumatori” (SECCI) e copia del testo contrattuale. Salvo approvazione di Sella Personal Credit S.p.A. Aulab S.r.l. opera quale intermediario del credito NON in esclusiva.

* In fase di richiesta del finanziamento verrà proposta la facoltà di selezionare, in alternativa all’imposta di bollo sul contratto di 16,00 euro, l’imposta sostitutiva, pari allo 0,25% dell’importo finanziato.

Contattaci senza impegno per informazioni sul corso

Scopriamo insieme se i nostri corsi fanno per te. Compila il form e aspetta la chiamata di uno dei nostri consulenti.