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 для створення адаптивного (чутливого) вебсайту, що містить гнучку панель навігації та гнучкий контент:
Спробуйте самі »
