Как правильно исправить код, чтобы при любых размераз получались 2 фигуры под 2мя другими фигурами?

Question

[gubina_aa]

Ребят, всем привет. Я создаю программу, которая работает следующим образом: взяла 4 дива, которые строят 4 фигуры, по заранее введенным размерам пользователя. Но, эти 4 фигуры(я строю квадраты) должны располагаться как: 2 сверху, два снизу, соответственно, два верхних должны быть под двумя нижними. У меня это получилось, но только для определённых размеров квадратов. Когда я строю 4 квадрата, размером 100*100 каждый-всё чётко, и фигуры встают как надо. Когда я строю фигуры больше, например, 750*800, всё ломается, и фигуры встают в ряд, либо сверху вниз, либо справа-налево. понимаю, что загвоздка в widht, которая в #fig, но при изменении wight, при любых размерах, 2 сверху 2 снизу не получается. Коротко, Задача: сделать, чтобы при любых введённых размерах фигуры оставались 2 сверху 2 снизу. Примечание: максимально-допустимая width 3000px, height: 1500px(в проге это есть). Прикрепляю всю программу целиком ссылкой на Codepen. Спасибо заранее за помощь. https://codepen.io/anast123/pen/YzGmRmj

Comments

[Вадим]

Правила, раздел 4.

4. После размещения вопроса пользователю запрещается осуществлять:
4.1. Дублирование вопроса, который уже размещался на страницах Сервиса. В том числе и в случае, если вопрос был удалён модератором, или на вопрос не был дан ответ (т.е. категорически запрещается дублирование вопроса с целью повторного привлечения к нему внимания).

Как правильно исправить код, чтобы при любых размераз получались 2 фигуры под 2мя другими фигурами?

[gubina_aa]

Вадим, убрала предыдущий вопрос

[Вадим]

gubina_aa,

(т.е. категорически запрещается дублирование вопроса с целью повторного привлечения к нему внимания)

[gubina_aa]

Вадим, сделано не с этой целью.

[Ankhena]

gubina_aa, замените флексы на гриды

Answer 1

[r_g_b_a]

<div id="fig" class="fig">
	<div class="fig__row">
		<div id ="body_kvadrat" class="fig__item"></div>
		<div id ="body_kvadrat2" class="fig__item"></div>
	</div>
	<div class="fig__row">
		<div id ="body_kvadrat1" class="fig__item"></div>
		<div id ="body_kvadrat3" class="fig__item"></div>
	</div>
</div>

#body_figure{
	border: 1px solid green;
}
.fig__row {
	display: flex;
	align-items: flex-start;
}
.fig__item {
	border: 1px solid #128;
	max-width: 3000px;
	max-height: 1500px;
	flex-shrink: 0;
}

Comments

[gubina_aa]

Спасибо, это решило главную проблему!