CSS Flex Responsive
Reaktionsschnelle Flexbox
Sie haben im Kapitel CSS-Medienabfragen gelernt , dass Sie mit Medienabfragen unterschiedliche Layouts für unterschiedliche Bildschirmgrößen und Geräte erstellen können.
Laptops und Desktops:
Mobiltelefone und :
Wenn Sie beispielsweise ein zweispaltiges Layout für die meisten Bildschirmgrößen und ein einspaltiges Layout für kleine Bildschirmgrößen (z. B. Telefone und Tablets) erstellen möchten, können Sie das flex-directionvon rowan column
einem bestimmten Haltepunkt (800 Pixel in der Beispiel unten):
Beispiel
.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;
}
}
Eine andere Möglichkeit besteht darin, den Prozentsatz der flexEigenschaft der Flex-Elemente zu ändern, um unterschiedliche Layouts für unterschiedliche Bildschirmgrößen zu erstellen. Beachten Sie, dass wir auch in flex-wrap: wrap;den Flex-Container einfügen müssen, damit dieses Beispiel funktioniert:
Beispiel
.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%;
}
}
Responsive Bildergalerie mit Flexbox
Verwenden Sie Flexbox, um eine responsive Bildergalerie zu erstellen, die je nach Bildschirmgröße zwischen vier, zwei oder Bildern in voller Breite variiert:
Responsive Website mit Flexbox
Verwenden Sie Flexbox, um eine responsive Website zu erstellen, die eine flexible Navigationsleiste und flexible Inhalte enthält: