Задать вопрос
Tolly
@Tolly
html

Как убрать отступы по краям 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>

  • Вопрос задан
  • 737 просмотров
Комментировать
Подписаться 1 Простой Комментировать
Решения вопроса 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
Ответ написан
Комментировать
Комментировать
Пригласить эксперта
Ваш ответ на вопрос

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

Похожие вопросы
Вакансии с Хабр Карьеры
CRM Bitrix24 разработчик
World Vision Clinic • Москва
от 170 000 ₽
JavaScript FullStack разработчик
Rocket • Смоленск
от 80 000 до 130 000 ₽
Frontend-разработчик JavaScript
div. • Ставрополь
от 40 000 до 90 000 ₽
Ещё вакансии
Заказы с Хабр Фриланса
Модернизация форума на xenforo
18 дек. 2024, в 11:03
5000 руб./за проект
Разработка программы для Windows
18 дек. 2024, в 10:44
130000 руб./за проект
Доработка веб-ПО на rust + vue.js
18 дек. 2024, в 10:02
7000 руб./за проект
Ещё заказы