@alekamisleforma

Адаптивность без медиа запросов. Как избежать пустого пространства при смене размеров экрана?

Здравствуйте! Задача стандартная: есть блоки, которые перескакивают на строку ниже, когда первая строка заполнена. Реализовать это статично никаких проблем не составляет, однако проблемы возникают при изменении ширины экрана. Если к блокам (.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;
}
  • Вопрос задан
  • 273 просмотра
Пригласить эксперта
Ответы на вопрос 2
dimovich85
@dimovich85 Куратор тега CSS
https://u-academy.net/
max-width задать
Ответ написан
delphinpro
@delphinpro Куратор тега CSS
frontend developer
Все возможно.
Основной вариант пилите на гридах, дополнительно через @supports зафолбечьте на флексах. Фоллбек естественно будет немного отличаться поведением и видом от основного варианта, но доступность контента сохранится, это главное.

Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы