Как выстроить 4 блока, чтобы расстояния были одинаковые на флексах?

Question

[tgarl]

Есть такой шаблон:


Верстка:

<div class="modal__box-nominal-list">
		<ul>
			<li><a href="javascript:void(0);" class="active_nominal">10 000 ₽</a></li>
			<li><a href="javascript:void(0);">30 000 ₽</a></li>
			<li><a href="javascript:void(0);">100 000 ₽</a></li>
		</ul>
		<label class="input-container" for="free_nominal">
			<input id="free_nominal" name="free_nominal" class="input" type="text" placeholder="Сумма должна быть кратной 100 и больше 900" value="" inputmode="numeric" >
		</label>
	</div>

Использую флекс:

.modal__box-nominal-list {
	width:100%;
	display: flex;
	gap: 10px;
	flex-direction: column;
}
 ul{
	display: flex;
	justify-content: space-between;
	gap: 10px;
	flex-wrap: wrap;	
}
 li{
	display:block;
	width:calc(33% - 6px); //половина от gap +1px, так как на малых экранах будет перенос
	margin-top:0;

Но расстояния никак не выходит сделать одинаковыми.
В чем ошибка?

Вот завел песочницу https://codepen.io/tgarl/pen/yyeRBdW
Получается между блоками у меня 13px и 11px и между 3 и инпутом 10px.
Замер делаю линейкой из программы FastStone.

Comments

[Александр Васильев]

публикуй в песочницу и будет понятно, иначе битва экстрасенсов

[tgarl]

Александр Васильев, добавил песочницу

[tgarl]

исправил на 9px вместо 10 стало ровно между блоками, но между ними растояние плавающее в зависимости от разрешения, а вот с нижним блоком постоянное.
попрообовал перенести label в li и назначит :last-child пропорционально не проставляет, а дизайнер требует чтобы прям ровно, согласен что пусть будет немного плавающим в зависимости от разрешения, но ровным между 3 блоками и импутом

[Александр Васильев]

tgarl, не понятно, зачем тебе линейка. gap - есть gap. Используй grid и fr, убери расчет ширины. Если тебе надо включить еще один элемент, ты можешь даже grid-template-areas использовать. Да вариантов полно. 33% указывать не надо - это неверный расчет, calc(100% / 3) - будет точнее.
Для всей конструкции ты можешь использовать схему

.flex-container {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
}
.flex-item {
    flex: 1 1 calc((100% / 3) - 2rem);
}

забудь про линейки

[tgarl]

выдели как отдельный ответ, отмечу решением
33% - старая привычка(
grid нельзя так как у нас у всех в офисе win7, и в старых браузерах(обновить нельзя) он не работает
линейку использую - потому что я не вижу на глаз разницу в несколько пикселей,
а вот дизайнер даже в 1px начинает придираться - глаз режет типа,

13px и 11px и между 3 и инпутом 10px

это она увидела, для меня если бы не линейка одинаково

[Антон Антон]

Александр Васильев,

flex: 1 1 calc((100% / 3) - 2rem);

зачем так сложно? для одинаковой ширины просто basis должен быть одинаковым и grow/shrink. в вырожденном случае
flex: 1;

[Александр Васильев]

Антон Антон, да там масса вариантов реализации, но не "линейка" жеж

[Pavel_20]

гриды есть для этого

[tgarl]

Pavel_20, а вы читали выше что написано?
grid нельзя так как у нас у всех в офисе win7, и в старых браузерах(обновить нельзя) он не работает

[Pavel_20]

tgarl, ну тогда сочувтвую, на флексах такое в 2025 делать когда есть гриды - лишняя трата времени

Answer 1

[Александр Васильев]

Для всей конструкции (4 блока в контейнере) ты можешь использовать схему
33% указывать не надо - это неверный расчет, calc(100% / 3) - будет точнее.

.flex-container {
display: flex;
flex-wrap: wrap;
gap: 1rem;
}
.flex-item {
flex: 1 1 calc((100% / 3) - 2rem);
}

Answer 2

[Антон Антон]

https://play.tailwindcss.com/weO39mKXqS

или даже так https://play.tailwindcss.com/b4Twc7BQHT