CSS Flex Responsywny
Responsywny Flexbox
Z rozdziału CSS Media Queries dowiedziałeś się , że za pomocą zapytań o media możesz tworzyć różne układy dla różnych rozmiarów ekranu i urządzeń.
Laptopy i komputery stacjonarne:
Telefony i tablety:
Na przykład, jeśli chcesz utworzyć układ dwukolumnowy dla większości rozmiarów ekranu i układ jednokolumnowy dla małych rozmiarów ekranu (takich jak telefony i tablety), możesz zmienić flex-directionod rowna column
w określonym punkcie przerwania (800 pikseli w przykład poniżej):
Przykład
.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;
}
}
Innym sposobem jest zmiana procentu flexwłaściwości elementów flex, aby utworzyć różne układy dla różnych rozmiarów ekranu. Zwróć uwagę, że aby ten przykład zadziałał, musimy również uwzględnić flex-wrap: wrap;w kontenerze flex:
Przykład
.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%;
}
}
Responsywna galeria obrazów za pomocą Flexbox
Użyj flexbox, aby stworzyć responsywną galerię obrazów, która zawiera cztery, dwa lub obrazy o pełnej szerokości, w zależności od rozmiaru ekranu:
Responsywna strona internetowa wykorzystująca Flexbox
Użyj flexbox, aby stworzyć responsywną stronę internetową, zawierającą elastyczny pasek nawigacyjny i elastyczną treść: