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

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

Если все дети имеют такую же минимальную ширину, я хочу, чтобы это создало эффект сетки. Например, на больших экранах дети могут складывать 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' />");
});