CSS Flexbox отзывчивый
Адаптивный 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, чтобы создавать разные макеты для разных размеров экрана. Обратите внимание, что мы также должны включить flex-wrap: wrap; в контейнер flex, чтобы этот пример работал:
.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 для создания адаптивного веб-сайта, содержащего гибкую панель навигации и гибкий контент:
Попробуйте сами »