Я сделал какой-то сайт и использую flexbox для оформления макета.
Структура страницы проста. Всего 3 тега.
<header>
<section>
<footer>
[index.html]
<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<header>
<div class="header__left">
<span>Email here or call</span>
</div>
<div class="header__center">
<img src="img/logo.png">
</div>
<div class="header__right">
<a href="#">About us</a>
<a href="#">Our Work</a>
<a href="#">Our People</a>
</div>
</header>
<section>
<img src="./img/dummy.jpg" alt="Sample photo">
<img src="./img/dummy.jpg" alt="Sample photo">
<img src="./img/dummy.jpg" alt="Sample photo">
<img src="./img/dummy.jpg" alt="Sample photo">
<img src="./img/dummy.jpg" alt="Sample photo">
<img src="./img/dummy.jpg" alt="Sample photo">
<img src="./img/dummy.jpg" alt="Sample photo">
<img src="./img/dummy.jpg" alt="Sample photo">
<img src="./img/dummy.jpg" alt="Sample photo">
<img src="./img/dummy.jpg" alt="Sample photo">
<img src="./img/dummy.jpg" alt="Sample photo">
<img src="./img/dummy.jpg" alt="Sample photo">
</section>
<footer>
THIS IS FOOTER
</footer>
</body>
</html>
[style.css]
html, body {
padding: 0;
margin: 0;
}
header {
display: flex;
height: 70px;
}
.header__left {
flex: 1;
display: flex;
justify-content: center;
align-items: center;
}
.header__center {
flex: 1;
display: flex;
justify-content: center;
align-items: center;
}
.header__right {
flex: 1;
display: flex;
justify-content: center;
align-items: center;
}
section {
display: flex;
flex-wrap: wrap;
align-items: flex-start;
max-height: 100vh;
}
section img {
max-width: 25vw;
}
И определено max-width: 25vw; для отображения 4 изображений в 1 строке.
Когда я зашел на сайт, это выглядит так.
Если браузер маленький, он работает отлично.
Но когда я увеличиваю размер браузера,
<section> вторжение <footer>
Есть ли способ предотвратить это?
Спасибо.