CSS flessibile reattivo
Flexbox reattivo
Hai imparato dal capitolo CSS Media Query che puoi utilizzare le media query per creare layout diversi per schermi e dispositivi di dimensioni diverse.
Laptop e desktop:
Cellulari Tablet:
Ad esempio, se desideri creare un layout a due colonne per la maggior parte delle dimensioni dello schermo e un layout a una colonna per schermi di dimensioni ridotte (come telefoni e tablet), puoi modificare flex-directionda rowa column
a un punto di interruzione specifico (800 px nel esempio sotto):
Esempio
.flex-container {
display: flex;
flex-direction: row;
}
/* Responsive layout - makes a one column layout instead of a two-column
layout */
@media (max-width: 800px) {
.flex-container {
flex-direction: column;
}
}
Un altro modo è modificare la percentuale della flexproprietà degli elementi flessibili per creare layout diversi per dimensioni dello schermo diverse. Nota che dobbiamo anche includere flex-wrap: wrap;nel contenitore flessibile per far funzionare questo esempio:
Esempio
.flex-container {
display: flex;
flex-wrap: wrap;
}
.flex-item-left {
flex: 50%;
}
.flex-item-right {
flex: 50%;
}
/* Responsive layout - makes a one column layout instead of a two-column
layout */
@media (max-width: 800px) {
.flex-item-right,
.flex-item-left {
flex: 100%;
}
}
Galleria di immagini reattiva utilizzando Flexbox
Usa flexbox per creare una galleria di immagini reattiva che varia tra quattro, due o immagini a larghezza intera, a seconda delle dimensioni dello schermo:
Sito web reattivo con Flexbox
Usa flexbox per creare un sito web reattivo, contenente una barra di navigazione flessibile e contenuti flessibili: