CSS Flex responzivní
Responzivní Flexbox
Z kapitoly Dotazy na média CSS jste se dozvěděli , že pomocí dotazů na média můžete vytvářet různá rozvržení pro různé velikosti obrazovky a zařízení.
Notebooky a stolní počítače:
Mobilní a tablety:
Chcete-li například vytvořit dvousloupcové rozvržení pro většinu velikostí obrazovek a jednosloupcové rozvržení pro malé velikosti obrazovek (jako jsou telefony a tablety), můžete změnit flex-directionz rowna column
na konkrétní zarážkový bod (800 px v příklad níže):
Příklad
.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;
}
}
Dalším způsobem je změnit procento flexvlastnosti flexibilních položek a vytvořit různá rozvržení pro různé velikosti obrazovky. Všimněte si, že do flex kontejneru musíme také zahrnout flex-wrap: wrap;, aby tento příklad fungoval:
Příklad
.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%;
}
}
Responzivní galerie obrázků pomocí Flexbox
Použijte flexbox k vytvoření responzivní galerie obrázků, která se liší mezi čtyřmi, dvěma nebo obrázky v plné šířce v závislosti na velikosti obrazovky:
Responzivní web využívající Flexbox
Použijte flexbox k vytvoření responzivního webu obsahujícího flexibilní navigační panel a flexibilní obsah: