Адаптивный Flexbox
Медиазапросы позволяют макету на flexbox менять форму в зависимости от размера экрана и устройства.
Возьмём дизайн с тремя колонками на больших экранах и одной колонкой на маленьких. Один подход переключает flex-direction с row на column, когда достигнута выбранная точка перелома.
Другой подход сохраняет направление и изменяет процентное значение свойства flex у каждого flex-элемента. Чтобы это работало, flex-контейнеру также нужен flex-wrap: wrap;.
Изменение flex-direction
При ширине экрана 600px или меньше flex-direction переходит с row на column.
Prompt
Создайте страницу с трёхколоночным flexbox-макетом, используя flex-direction: row. Добавьте медиазапрос при max-width 600px, который изменяет flex-direction на column, превращая макет в одноколоночный. Используйте три цветных блока с текстом.
Результат: полная HTML-страница
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Responsive Flexbox - Flex Direction</title>
<style>
.flex-container {
display: flex;
flex-direction: row;
}
.flex-item {
background-color: #f1f1f1;
padding: 10px;
font-size: 30px;
text-align: center;
width: 100%;
}
/* Make a one column-layout instead of three-column layout */
@media (max-width: 600px) {
.flex-container {
flex-direction: column;
}
}
</style>
</head>
<body>
<h1>Responsive Flexbox</h1>
<p>Resize the browser window to see the effect.</p>
<div class="flex-container">
<div class="flex-item">1</div>
<div class="flex-item">2</div>
<div class="flex-item">3</div>
</div>
</body>
</html>
Изменение процентного значения flex
Как только ширина экрана становится не больше 600px, свойство flex меняется скачком с 33.3% на 100%.
Prompt
Создайте страницу с flex-контейнером, используя flex-wrap: wrap. У каждого flex-элемента flex: 33.3%, что создаёт три колонки. Добавьте медиазапрос при max-width 600px, который изменяет каждый элемент на flex: 100% для одноколоночного макета.
Результат: полная HTML-страница
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Responsive Flexbox - Flex Percentage</title>
<style>
.flex-container {
display: flex;
flex-wrap: wrap;
}
.flex-item {
background-color: #f1f1f1;
padding: 10px;
text-align: center;
font-size: 30px;
flex: 33.3%;
}
/* Make a one column-layout instead of a three-column layout */
@media (max-width: 600px) {
.flex-item {
flex: 100%;
}
}
</style>
</head>
<body>
<h1>Responsive Flexbox</h1>
<p>Resize the browser window to see the effect.</p>
<div class="flex-container">
<div class="flex-item">1</div>
<div class="flex-item">2</div>
<div class="flex-item">3</div>
</div>
</body>
</html>
Адаптивная галерея изображений с использованием Flexbox
Объедините flexbox с медиазапросами, и галерея изображений сможет менять количество колонок в зависимости от размера экрана.
Пример
Prompt
Создайте адаптивную галерею изображений с использованием flexbox и медиазапросов. Показывайте четыре изображения в ряду на больших экранах, два в ряду на средних экранах (max-width 800px) и одно в ряду на маленьких экранах (max-width 600px). Используйте изображения-заполнители с описательным текстом под каждым.
Результат: полная HTML-страница
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Responsive Image Gallery</title>
<style>
* {
box-sizing: border-box;
}
body {
margin: 0;
font-family: Arial, sans-serif;
}
.gallery {
display: flex;
flex-wrap: wrap;
padding: 0 4px;
}
.gallery-item {
flex: 25%;
max-width: 25%;
padding: 4px;
}
.gallery-item img {
width: 100%;
vertical-align: middle;
}
.gallery-item .desc {
padding: 10px;
text-align: center;
background-color: #f1f1f1;
font-size: 14px;
}
@media (max-width: 800px) {
.gallery-item {
flex: 50%;
max-width: 50%;
}
}
@media (max-width: 600px) {
.gallery-item {
flex: 100%;
max-width: 100%;
}
}
</style>
</head>
<body>
<h1>Responsive Image Gallery</h1>
<p>Resize the browser window to see the responsive effect.</p>
<div class="gallery">
<div class="gallery-item">
<img src="img_5terre.jpg" alt="Cinque Terre">
<div class="desc">Cinque Terre</div>
</div>
<div class="gallery-item">
<img src="img_forest.jpg" alt="Forest">
<div class="desc">Forest</div>
</div>
<div class="gallery-item">
<img src="img_lights.jpg" alt="Northern Lights">
<div class="desc">Northern Lights</div>
</div>
<div class="gallery-item">
<img src="img_mountains.jpg" alt="Mountains">
<div class="desc">Mountains</div>
</div>
</div>
</body>
</html>
Адаптивный веб-сайт с использованием Flexbox
С помощью flexbox можно создать и полный макет адаптивного веб-сайта, в котором и панель навигации, и область контента остаются гибкими.
Пример
Prompt
Создайте адаптивный макет веб-сайта с использованием flexbox. Включите верхнюю панель навигации со ссылками, основную область контента с боковой панелью и подвал. Используйте медиазапросы, чтобы расположить ссылки навигации вертикально и разместить боковую панель под контентом на экранах шириной менее 600px.
Результат: полная HTML-страница
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Responsive Website using Flexbox</title>
<style>
* {
box-sizing: border-box;
}
body {
font-family: Arial, sans-serif;
margin: 0;
}
.header {
background-color: #333;
color: white;
padding: 15px;
text-align: center;
}
.navbar {
display: flex;
background-color: #555;
}
.navbar a {
color: white;
padding: 14px 20px;
text-decoration: none;
text-align: center;
}
.navbar a:hover {
background-color: #000;
}
.row {
display: flex;
flex-wrap: wrap;
}
.side {
flex: 30%;
background-color: #f1f1f1;
padding: 20px;
}
.main {
flex: 70%;
background-color: white;
padding: 20px;
}
.footer {
padding: 20px;
text-align: center;
background-color: #ddd;
}
@media (max-width: 600px) {
.navbar {
flex-direction: column;
}
.row {
flex-direction: column;
}
}
</style>
</head>
<body>
<div class="header">
<h1>My Website</h1>
<p>A flexible layout using CSS Flexbox.</p>
</div>
<div class="navbar">
<a href="#">Link</a>
<a href="#">Link</a>
<a href="#">Link</a>
<a href="#">Link</a>
</div>
<div class="row">
<div class="main">
<h2>Main Content</h2>
<p>Some text about something important.</p>
<p>Some other text about something else.</p>
</div>
<div class="side">
<h2>About Me</h2>
<h5>Photo of me:</h5>
<p>Some text about me in culpa qui officia deserunt mollit anim.</p>
</div>
</div>
<div class="footer">
<p>Footer</p>
</div>
</body>
</html>