Адаптивный CSS Flex
Отзывчивый флексбокс
Из главы « Медиа-запросы CSS » вы узнали , что вы можете использовать медиа-запросы для создания разных макетов для разных размеров экрана и устройств.
Ноутбуки и настольные компьютеры:
Мобильные и планшеты:
Например, если вы хотите создать макет с двумя столбцами для большинства размеров экрана и макет с одним столбцом для небольших размеров экрана (таких как телефоны и планшеты), вы можете изменить flex-directionс rowна column
в определенной контрольной точке (800 пикселей в пример ниже):
Пример
.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;
}
}
Другой способ — изменить процент flexсвойства flex-элементов, чтобы создать разные макеты для разных размеров экрана. Обратите внимание, что мы также должны включить flex-wrap: wrap;контейнер flex, чтобы этот пример работал:
Пример
.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%;
}
}
Адаптивная галерея изображений с использованием Flexbox
Используйте flexbox для создания адаптивной галереи изображений, которая может состоять из четырех, двух или полноразмерных изображений в зависимости от размера экрана:
Адаптивный сайт с использованием Flexbox
Используйте flexbox для создания адаптивного веб-сайта, содержащего гибкую панель навигации и гибкий контент: