Как убрать отступы по краям flex-wrap?

Количество блоков 1-3, нужно убрать отступы по краям блока flex.
Вариант nth-child c media знаю, может есть еще какие-то решения?

https://codepen.io/workcode/pen/xyowjO
Code
<!DOCTYPE html>
<html lang="ru">
<head>
	<meta charset="UTF-8">
	<title>Убрать отступ</title>
	<style>
		html, body {height: 100%; width: 100%; padding: 0; margin: 0; font-size: 20px; font-family: Arial; }
		.flex {	display: flex; max-width: 1250px; flex-wrap: wrap; padding: 20px 0; background-color: #ccc; margin: auto;}
		.flex > div { flex: 1 1 350px; min-width: 200px; padding: 20px; }
		.image {
			background: no-repeat center center #ccc;
			background-size: cover;
			height: 250px;
		}
	</style>
</head>
<body>

	<div class="flex">
		<div>
			<div class="image" style="background-image: url('https://loremflickr.com/320/240/nature?random=1');"></div>
			<div><span>Далеко-далеко за словесными горами в стране, гласных и согласных живут рыбные тексты.</span></div>
		</div>
		<div>
			<div class="image" style="background-image: url('https://loremflickr.com/320/240/nature?random=2');"></div>
			<div><span>Далеко-далеко за словесными горами в стране, гласных и согласных живут рыбные тексты.</span></div>
		</div>
		<div>
			<div class="image" style="background-image: url('https://loremflickr.com/320/240/nature?random=3');"></div>
			<div><span>Далеко-далеко за словесными горами в стране, гласных и согласных живут рыбные тексты.</span></div>
		</div>
		<div>
			<div class="image" style="background-image: url('https://loremflickr.com/320/240/nature?random=4');"></div>
			<div><span>Далеко-далеко за словесными горами в стране, гласных и согласных живут рыбные тексты.</span></div>
		</div>
		<div>
			<div class="image" style="background-image: url('https://loremflickr.com/320/240/nature?random=5');"></div>
			<div><span>Далеко-далеко за словесными горами в стране, гласных и согласных живут рыбные тексты.</span></div>
		</div>
		<div>
			<div class="image" style="background-image: url('https://loremflickr.com/320/240/nature?random=6');"></div>
			<div><span>Далеко-далеко за словесными горами в стране, гласных и согласных живут рыбные тексты.</span></div>
		</div>
		<div>
			<div class="image" style="background-image: url('https://loremflickr.com/320/240/nature?random=7');"></div>
			<div><span>Далеко-далеко за словесными горами в стране, гласных и согласных живут рыбные тексты.</span></div>
		</div>
		<div>
			<div class="image" style="background-image: url('https://loremflickr.com/320/240/nature?random=8');"></div>
			<div><span>Далеко-далеко за словесными горами в стране, гласных и согласных живут рыбные тексты.</span></div>
		</div>
		<div>
			<div class="image" style="background-image: url('https://loremflickr.com/320/240/nature?random=9');"></div>
			<div><span>Далеко-далеко за словесными горами в стране, гласных и согласных живут рыбные тексты.</span></div>
		</div>
		<div>
			<div class="image" style="background-image: url('https://loremflickr.com/320/240/nature?random=10');"></div>
			<div><span>Далеко-далеко за словесными горами в стране, гласных и согласных живут рыбные тексты.</span></div>
		</div>
				<div>
			<div class="image" style="background-image: url('https://loremflickr.com/320/240/nature?random=11');"></div>
			<div><span>Далеко-далеко за словесными горами в стране, гласных и согласных живут рыбные тексты.</span></div>
		</div>
				<div>
			<div class="image" style="background-image: url('https://loremflickr.com/320/240/nature?random=12');"></div>
			<div><span>Далеко-далеко за словесными горами в стране, гласных и согласных живут рыбные тексты.</span></div>
		</div>
	</div>

</body>
</html>

  • Вопрос задан
  • 715 просмотров
Решения вопроса 1
Tolly
@Tolly Автор вопроса
Вроде решил вопрос:
.flex { margin-left: -20px;}
.flex > div { padding: 20px 0 20px 20px; }


PS. У .flex был margin auto, но это просто пример. Чтобы снова выравнять по середине, достаточно еще раз обернуть в div и применить этот самый margin auto.

Нашел еще интересное решение: https://codepen.io/workcode/pen/oQxNYW
Ответ написан
Комментировать
Пригласить эксперта
Ваш ответ на вопрос

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

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