CSS. Flexbox. Можно ли добиться такого поведения?

Question

[DTX]

Можно ли с Flexbox добиться такого поведения?



Разумеется, с media-queries. Из проблем столкнулся с тем, что не смог задать элементам свойство, чтобы они были на второй строке. Подогнать ширину не получается из-за блоков фиксированной ширины.

Answer 1

[sergski]

в media-query задайте order

@media screen and (max-width: 800px) {
		.main {
			display: flex;
			flex-direction: row;
			flex-wrap: wrap;
		}

		.item {
			display: inline-flex;
		}

		.item1, .item5 {
			width: calc(50% - 50px);
		}

		.item2, .item4 {
			width: calc(50% - 25px);
		}

		.item1 {
			order: 1;
		}

		.item2 {
			order: 4;
		}

		.item3 {
			order: 2;
			width: 100px;
		}

		.item4 {
			order: 6;
		}


		.item5 {
			order: 3;
		}

		.item6 {
			order: 5;
			width: 50px;
		}

	}

<div class="main">
	<div class="item item1">1</div>
	<div class="item item2">2</div>
	<div class="item item3">3</div>
	<div class="item item4">4</div>
	<div class="item item5">5</div>
	<div class="item item6">6</div>
</div>

Comments

[DTX]

и эементы всё равно останутся на одной линии, либо начнут переноситься по одному.

[sergski]

у родителя установите flex-wrap: wrap;

[DTX]

первый комментартй написан у четом этого свойства

[sergski]

Значит width для блоков не задана. Тут все просто, не может не работать)

[DTX]

И какую width задвать? Проблема в том, что я не могу для sizeable-блоков указать что-то вроде '50%-25px';

[sergski]

можете — calc(50% - 25px)

Answer 2

[Антон Нагаец]

Пример решения

Comments

[DTX]

i.imgur.com/YfbUmG1.png

[Антон Нагаец]

DirecTwiX: media screen and (max-width: 800px)
Делал на 1080
imgur.com/UDXuKlw
Значения под себя отрегулируйте.

[DTX]

Антон Нагаец: так проблема как раз в том, что всё при растяжении ломается. Должно быть адаптивно.

[Антон Нагаец]

Обновил с тестовыми данными. Просто при медиа вы задаете фиксированный размер, чтобы верстка корректно отображалась на мобильных устройствах. Для этого они и созданы.

[DTX]

Ну через calc() уже не то..

[Антон Нагаец]

DirecTwiX: форкните к себе и поиграйте своими значениями, мы не видим, что именно вы туда забиваете. Вы просили помочь и приложили картинку. Все работает так как на ней. Если хотите с данными то предоставьте данные, либо их описание, которые будут в столбцах.

[DTX]

Антон Нагаец: я про то, что calc() это не камильфо