1

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

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

1
  • 1
    Нельзя. Хочешь одну обертку - используй гриды.
    – user355286
    Commented 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 но тогда у вас будет не один контейнер и структура вашей верстки будет гораздо больше, нежели воспользоваться тем инструментом, который предназначен для таких целей.

Ваш ответ

Нажимая «Отправить ответ», вы соглашаетесь с условиями пользования и подтверждаете, что прочитали политику конфиденциальности.

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