Здравствуйте! Задача стандартная: есть блоки, которые перескакивают на строку ниже, когда первая строка заполнена. Реализовать это статично никаких проблем не составляет, однако проблемы возникают при изменении ширины экрана. Если к блокам (.block) не добавлять flex-grow: 1; , то при уменьшении ширины экрана, один из блоков перескакивает вниз и на его месте остается пустое пространство. Если же к .block добавить flex-grow: 1; , то блоки нормально распределяют между собой свободное пространство строки, однако проблема в том, что не на всех строках одинаковое количество блоков из-за чего некоторые блоки становятся слишком широкими. Как мне сделать так, чтобы блоки делили между собой свободное пространство строки, однако при этом не увеличивались больше какого-то определенного размера? Возможно ли это реализовать без медиа запросов?
Нажми меня! HTML + CSS<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="section2">
<div class="aboutus">
<div class="block">
<div class="icon"></div>
<div class="text">
<h3>Designed for developers</h3>
<div class="txt">Outline a benefit here. Tell users what your plugin/software can do for them. You can change the icon above to any of the 400+ FontAwesome icons available.</div>
</div>
</div>
<div class="block">
<div class="icon"></div>
<div class="text">
<h3>Designed for developers</h3>
<div class="txt">Outline a benefit here. Tell users what your plugin/software can do for them. You can change the icon above to any of the 400+ FontAwesome icons available.</div>
</div>
</div>
<div class="block">
<div class="icon"></div>
<div class="text">
<h3>Designed for developers</h3>
<div class="txt">Outline a benefit here. Tell users what your plugin/software can do for them. You can change the icon above to any of the 400+ FontAwesome icons available.</div>
</div>
</div>
<div class="block">
<div class="icon"></div>
<div class="text">
<h3>Designed for developers</h3>
<div class="txt">Outline a benefit here. Tell users what your plugin/software can do for them. You can change the icon above to any of the 400+ FontAwesome icons available.</div>
</div>
</div>
<div class="block">
<div class="icon"></div>
<div class="text">
<h3>Designed for developers</h3>
<div class="txt">Outline a benefit here. Tell users what your plugin/software can do for them. You can change the icon above to any of the 400+ FontAwesome icons available.</div>
</div>
</div>
<div class="block">
<div class="icon"></div>
<div class="text">
<h3>Designed for developers</h3>
<div class="txt">Outline a benefit here. Tell users what your plugin/software can do for them. You can change the icon above to any of the 400+ FontAwesome icons available.</div>
</div>
</div>
<div class="block">
<div class="icon"></div>
<div class="text">
<h3>Designed for developers</h3>
<div class="txt">Outline a benefit here. Tell users what your plugin/software can do for them. You can change the icon above to any of the 400+ FontAwesome icons available.</div>
</div>
</div>
</div>
</div>
</body>
</html>
* {
margin: 0;
padding: 0;
}
.aboutus {
padding: 70px 150px;
display: flex;
flex-wrap: wrap;
}
.block {
margin: 15px;
margin-bottom: 30px;
width: calc(33.333% - 30px);
min-width: 240px;
display: flex;
}
.icon {
width: 25px;
height: 25px;
flex-shrink: 0;
background-color: #094f68;
margin-right: 20px;
}
Простой
