CSS Flex Responsief
Responsieve Flexbox
U hebt uit het hoofdstuk CSS -mediaquery's geleerd dat u mediaquery's kunt gebruiken om verschillende lay-outs te maken voor verschillende schermformaten en apparaten.
Laptops en desktops:
Mobiele en tablets:
Als u bijvoorbeeld een lay-out met twee kolommen wilt maken voor de meeste schermformaten en een lay-out met één kolom voor kleine schermformaten (zoals telefoons en tablets), kunt u het wijzigen flex-directionvan rownaar column
op een specifiek breekpunt (800px in de voorbeeld hieronder):
Voorbeeld
.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;
}
}
Een andere manier is om het percentage van de flexeigenschap van de flexitems te wijzigen om verschillende lay-outs voor verschillende schermformaten te creëren. Merk op dat we ook flex-wrap: wrap;op de flexcontainer moeten opnemen om dit voorbeeld te laten werken:
Voorbeeld
.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%;
}
}
Responsieve afbeeldingengalerij met Flexbox
Gebruik flexbox om een responsieve afbeeldingengalerij te maken die varieert tussen vier, twee of volledige afbeeldingen, afhankelijk van de schermgrootte:
Responsieve website met Flexbox
Gebruik flexbox om een responsieve website te maken, met een flexibele navigatiebalk en flexibele inhoud: