1

введите сюда описание изображения

Подскажите пожалуйста можно ли как-нибудь с помощью flexbox используя только один контейнер-обертку, в котором 6 изображений, выставить их так, как на картинке, чтобы потом при адаптивной вертске они выводились в том порядке, в котором идут цифры на них. У меня только есть идеи как это сделать с помощью нескольких контейнеров. Но потом не смогу вывести в нужном порядке. Ведь, если я правильно понимаю, то свойство order работает только в одном контейнере.

1
  • 1
    Нельзя. Хочешь одну обертку - используй гриды.
    – user355286
    19 ноя 2019 в 15:35

1 ответ 1

0

.container {
	display: grid;
	grid-gap: 20px;
	grid-template-areas: "row-1 row-1 row-2" "row-1 row-1 row-2" "row-3 row-5 row-2" "row-4 row-5 row-6";
}

.block {
	background-color: #cccccc;
	padding: 10px 20px;
}

.block-1 { grid-area: row-1; }
.block-2 { grid-area: row-2; }
.block-3 { grid-area: row-3; }
.block-4 { grid-area: row-4; }
.block-5 { grid-area: row-5; }
.block-6 { grid-area: row-6; }
<div class="container">
	<div class="block block-1">
		<h1>1</h1>
	</div>
	<div class="block block-2">
		<h1>2</h1>
	</div>
	<div class="block block-3">
		<h1>3</h1>
	</div>
	<div class="block block-4">
		<h1>4</h1>
	</div>
	<div class="block block-5">
		<h1>5</h1>
	</div>
	<div class="block block-6">
		<h1>6</h1>
	</div>
</div>

Самое простое на Grid'ах.

grid-template-areas отвечает за сетку, которую можно задать:

строка - "row-1 row-1 row-2"

строка - "row-1 row-1 row-2"

строка - "row-3 row-5 row-2"

строка - "row-4 row-5 row-6"

Я визуально поделил каждый блок на 3 столбца и 4 строки. И создал некое подобие матрицы. Дальше я дал имена каждому из блоков и просто построил сетку как на вашей картинке.

upd: можно извращаться и сделать на flex'ax но тогда у вас будет не один контейнер и структура вашей верстки будет гораздо больше, нежели воспользоваться тем инструментом, который предназначен для таких целей.

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.