Flexbox in CSS: Primi passi per la strutturazione del tuo sito web

In questo tutorial imparerai come creare una struttura di esempio per i tuoi progetti web utilizzando il layout Flexbox in CSS e HTML. Esploreremo l'utilizzo degli strumenti di debugging integrati in Visual Studio Code insieme a Microsoft Edge, e faremo i primi passi per attivare il layout Flexbox. Flexbox è un sistema di layout potente che ti aiuta a creare layout complessi con poco sforzo e posizionamento flessibile degli elementi.

Concetti chiave

• Con Flexbox puoi posizionare gli elementi orizzontalmente e verticalmente.
• È possibile integrare direttamente gli strumenti sviluppatore di Microsoft Edge in Visual Studio Code.
• La proprietà Flex-Direction influisce sull'allineamento degli elementi Flex.

Guida passo passo

Per prima cosa, installerai gli strumenti Microsoft Edge in Visual Studio Code. Cerca "Microsoft Edge Tools for VS Code" tra le estensioni e installale.

Dopo aver installato l'estensione, vai alle opzioni di debug. Clicca su "Run and Debug" e poi su "create a launch.json file". Questo ti aiuterà a configurare le impostazioni.

Nel file di configurazione appena creato, aggiungi una nuova configurazione per "Microsoft Edge Tools". Assicurati di inserire l'indirizzo locale come localhost:3000, poiché stiamo eseguendo il server su questa porta nel nostro terminale.

È ora il momento di avviare il tuo progetto. Vai nella directory corretta e esegui il comando npm run dev. Successivamente, apri localhost:3000 nel tuo browser.

Dopo aver caricato la pagina, puoi attivare gli strumenti sviluppatore di Microsoft Edge facendo clic sul pulsante corrispondente in Visual Studio Code. Questo aprirà lo strumento sviluppatore direttamente accanto al tuo editor.

Ora puoi vedere la struttura della tua applicazione. Abbiamo un contenitore (div) con la classe "Flex Container". All'interno di questo contenitore ci sono quattro elementi DIV, ciascuno con la classe "Flex Child" e ognuno che rappresenta i contenuti di testo 1, 2, 3 e 4.

Attualmente il Flex Container è definito con una larghezza di 400 pixel e un'altezza di 200 pixel, mentre i Flex Child sono definiti con una larghezza di 100 pixel e un'altezza di 50 pixel. Anche se attualmente nessuno dei figli è posizionato con Flexbox, vengono visualizzati in un elenco verticale.

Per utilizzare Flexbox attivamente, devi aggiungere e salvare l'attributo CSS display: flex; per il Flex Container. Vedrai che l'ordine dei figli cambierà automaticamente e saranno ora visualizzati affiancati.

Se desideri riordinare i Flex Child in verticale, puoi utilizzare la proprietà flex-direction. Imposta flex-direction: column; per il Flex Container per riportare l'allineamento dei Flex Child in direzione verticale.

Noterai che i Flex Child sono nuovamente posizionati verticalmente. Se regoli l'altezza e la larghezza, sembrerà che siano integrati in un blocco, anche se il display non è impostato su Block, ma su Flex.

Hai ora una panoramica delle basi del layout Flexbox. Nel video abbiamo discusso delle proprietà principali e visto le loro implicazioni. Nei prossimi tutorial esploreremo ulteriori funzionalità di Flexbox e vedremo cosa è possibile fare con questo potente sistema di layout.

Riepilogo

In questo tutorial hai imparato come costruire una struttura semplice con Flexbox in CSS. Hai integrato gli strumenti sviluppatore di Microsoft Edge in Visual Studio Code e hai intrapreso i primi passi per attivare il layout Flex. Ci sono molte opportunità che ti aspettano, che esploreremo nei prossimi video.