Позволить встроенным блочным элементам растягиваться и сжиматься и складываться, когда видовые экраны сжимаются

Учитывая следующий код, я хотел бы найти способ, чтобы серия элементов встроенного блока растягивала всю ширину родительского элемента при укладке поверх друг друга по мере обертывания строки.

<div id="parent">
  <div class="child"></div>
  <div class="child"></div>
  <div class="child"></div>
  <div class="child"></div>
  <div class="child"></div>
  <div class="child"></div>
  <div class="child"></div>
  <div class="child"></div>
  <div class="child"></div>
  <div class="child"></div>
</div>

Пример

Если все дети имеют такую ​​же минимальную ширину, я хочу, чтобы это создало эффект сетки. Например, на больших экранах дети могут складывать 5 до тех пор, пока они не перевернутся на вторую строку. Я бы хотел, чтобы все были 20% (1/5) доступной ширины. По мере того, как экран сжимается, пятый и десятый предметы обертываются, оставляя два ряда из 4 предметов и третий ряд из 2 предметов. Теперь я хотел бы, чтобы все дети растянулись на 25% (1/4) доступной ширины, за исключением последней строки из двух детей. Они должны составлять 50% каждый.

Попытки

Я пробовал плавать с детьми, делая их встроенными блоками, и я экспериментировал с flex-box, но ни один из них не дает мне результат, который я желаю. Прямые блоки стали самыми близкими, позволяя им складываться так же, как с уменьшением ширины родителя, но я не могу добиться растяжения.

Ограничения

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

Javascript отсутствует. Я хочу найти способ сделать это с помощью только CSS.

ОТВЕТЫ

Ответ 1

Большое спасибо Chris Coyier и CSS Tricks. Flexbox действительно является ответом. Вместо копирования и вставки его решения, здесь ссылка на его Pen: http://codepen.io/chriscoyier/pen/yCeax. Если вас интересует его вся эта мысль, вот сообщение в блоге: http://css-tricks.com/filling-space-last-row-flexbox/

Здесь фактическое решение, на всякий случай, если CodePen уйдет.

HTML

<button id="add">Add Child</button>

<div id="parent">
  <div class="child"></div>
  <div class="child"></div>
  <div class="child"></div>
  <div class="child"></div>
  <div class="child"></div>
  <div class="child"></div>
  <div class="child"></div>
  <div class="child"></div>
  <div class="child"></div>
  <div class="child"></div>
</div>

CSS

* {
  box-sizing: border-box;  
}

#parent {
  display: flex;
  flex-wrap: wrap;
}

.child {
  height: 50px;
  background: red;
  flex: 1;
  min-width: 25%;
  border: 5px solid white;
}

@media (max-width: 700px) {
  .child {
    min-width: 33.33%; 
  }
}

@media (max-width: 400px) {
  .child {
    min-width: 50%; 
  }
}

JQuery

$("#add").on("click", function() {
  $("#parent").append("<div class='child' />");
});