Рассчитать правильный желоб

Question

Я хочу иметь несколько блоков с разными размерами по умолчанию. Поскольку я использую justify-content: space-between;, я не могу (и не хочу) устанавливать пространство между 2 элементами с фиксированным значением, равно как и не хочу, чтобы это было для моих предметов. Но там у меня небольшие проблемы, когда ширина моего большого элемента составляет 49%, а моего маленького - 24,5% (см. Рисунок, пожалуйста):

Это код, который я использую:

.container{
    margin:8vh 0;
    display: flex;
    width:100%;
    flex-wrap: wrap;
    justify-content: space-between;
}

.media_child{
    background:cyan;
    width:49%;
    margin-top:15px;
}

.media_child_small{
    background:tomato;
    width:24.5%;
    margin-top:15px;
}

Как правильно рассчитать ширину в подобном сценарии и как бы я это сделал, если бы у меня было еще больше размеров ширины (25%, 33%, 50% и 75%)?

Answer 1

Вы можете установить значение flex, чтобы позволить расширять дочерние элементы, а затем установить min-width и max-width без фиксированное значение для width, чтобы браузер выполнял сам расчет чтобы соответствовать каждому элементу в лучшем случае.

Лучше всего привести пример для тестирования и игры:

body {
  counter-reset:divs;
  display:flex;
  flex-wrap:wrap;
}
div {
  counter-increment:divs;
  padding:5px;
  border:solid;
  margin:5px;
  flex:1;
  box-sizing:border-box;
  
}
div:before {
  content:'div N°'counter(divs)' class='attr(class);
}
.quart {
  min-width:23%;
  max-width:25%;
}
.quartx3 {
  min-width:74%;
  max-width:75%;
}
.third {
  min-width:30%;
  max-width:33.33%;
}
.thirdx2 {
  min-width:60%;
  max-width:66.66%;
}

<div class="quart"></div>
<div class="quart"></div>
<div class="quart"></div>
<div class="quart"></div>
<div class="third"></div>
<div class="thirdx2"></div>
<div class="quartx3"></div>
<div class="quart"></div>

ручка для игры и вилка https://codepen.io/gc-nomade/pen/wjPjmM