CSS Flex Адаптивность
Адаптивный Flexbox
Вы узнали из главы CSS Медиа запросы, что можно использовать медиа-запросы для создания различных макетов для разных размеров экрана и устройств.
Ноутбуки и настольные компьютеры:
Мобильные и планшеты:
Например, если вы хотите создать макет с двумя столбцами для большинства размеров экрана и макет с одним столбцом для экранов небольших размеров (например, телефонов и планшетов), вы можете изменить flex-direction из row в column в определенной точке останова (800 пикселей в примере ниже):
Пример
.flex-container {
display: flex;
flex-direction: row;
}
/* Адаптивный макет - делает макет с одним столбцом вместо макета с двумя столбцами */
@media (max-width: 800px) {
.flex-container {
flex-direction: column;
}
}
Другой способ - изменить процентное значение свойства flex гибких элементов, чтобы создать разные макеты для разных размеров экрана. Обратите внимание, что необходимо также включить flex-wrap: wrap; в гибкий контейнер, чтобы этот пример работал:
Пример
.flex-container {
display: flex;
flex-wrap: wrap;
}
.flex-item-left {
flex: 50%;
}
.flex-item-right {
flex: 50%;
}
/* Адаптивный макет - делает макет с одним столбцом вместо макета с двумя столбцами */
@media (max-width: 800px) {
.flex-item-right, .flex-item-left {
flex: 100%;
}
}
Адаптивная галерея изображений с использованием Flexbox
Используйте flexbox для создания адаптивной галереи изображений, которая может варьироваться от четырех, двух или полноразмерных изображений, в зависимости от размера экрана:
Попробуйте сами »Адаптивный веб-сайт с использованием Flexbox
Используйте flexbox для создания адаптивного веб-сайта, содержащего гибкую панель навигации и гибкий контент:
Попробуйте сами »
