Flex-box: выровнять последний ряд по сетке

Одним из способов было бы вставить несколько дополнительных элементов (столько, сколько максимальное количество элементов, которые вы когда-либо ожидали в строке), которым задана нулевая высота. Пространство по-прежнему разделено, но лишние строки сворачиваются в ничто:

http://codepen.io/dalgard/pen/Dbnus

body {
  padding: 5%;
}

div {
  overflow: hidden;
  background-color: yellow;
}

ul {
  display: flex;
  flex-wrap: wrap;
  margin: 0 -4px -4px 0;
  list-style: none;
  padding: 0;
}

li {
  flex: 1 0 200px;
  height: 200px;
  border-right: 4px solid black;
  border-bottom: 4px solid black;
  background-color: deeppink;
}
li:empty {
  height: 0;
  border: none;
}

*,
:before,
:after {
  box-sizing: border-box;
}

<div>
  <ul>
    <li>a</li>
    <li>b</li>
    <li>c</li>
    <li>d</li>
    <li>e</li>
    <li>f</li>
    <li>g</li>
    <li>h</li>
    <li>i</li>
    <li>j</li>
    <li>k</li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
  </ul>
</div>

В будущем это может стать достижимым с помощью нескольких ::after(n).

Как отмечали другие плакаты - нет чистого пути влево - выровняйте последнюю строку с помощью flexbox (по крайней мере, согласно текущей спецификации)

Тем не менее, для чего это стоит: с помощью модуля компоновки сетки CSS это удивительно легко произвести:

В основном соответствующий код сводится к следующему:

ul {
  display: grid; /* 1 */
  grid-template-columns: repeat(auto-fill, 100px); /* 2 */
  grid-gap: 1rem; /* 3 */
  justify-content: space-between; /* 4 */
}

1) Сделайте контейнерный контейнер сеткой

2) Установите сетку с автоматическими столбцами шириной 100 пикселей. (Обратите внимание, что использование автозаполнения (как установлено для auto-fit которое (для однострочного макета) сворачивает пустые дорожки в 0, заставляя элементы расширяться, чтобы заняться оставшимся пространством. Это приведет к оправданному " space-between 'layout, когда сетка имеет только одну строку, которая в нашем случае не то, что мы хотим. (ознакомьтесь с этой демонстрацией, чтобы увидеть разницу между ними)).

3) Установите промежутки/водосточные желоба для строк и столбцов сетки - здесь, так как вы хотите создать "промежуток между макетами" - разрыв будет фактически минимальным разрывом, потому что он будет расти по мере необходимости.

4) Аналогично flexbox.

ul {
  display: grid;
  grid-template-columns: repeat(auto-fill, 100px);
  grid-gap: 1rem;
  justify-content: space-between;
  
  /* boring properties */
  list-style: none;
  background: wheat;
  padding: 2rem;
  width: 80vw;
  margin: 0 auto;
}

li {
  height: 50px;
  border: 1px solid green;
}

<ul>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
</ul>

Codepen Demo (Изменить размер, чтобы увидеть эффект)

Без дополнительной разметки просто добавление ::after работало для меня, определяя ширину столбца.

.grid {
  display:flex;
  justify-content:space-between;
  flex-wrap:wrap;
}
.grid::after{
  content: '';
  width: 10em // Same width of .grid__element
}
.grid__element{
  width:10em;
}

С HTML следующим образом:

<div class=grid">
   <div class="grid__element"></div>
   <div class="grid__element"></div>
   <div class="grid__element"></div>
</div>

Вы не можете. Flexbox не является сеткой. У него нет языковых конструкций, чтобы делать то, о чем вы просите, по крайней мере, если вы используете justify-content: space-between. Ближе всего к Flexbox можно использовать ориентацию столбца, для которой требуется установить явную высоту:

http://cssdeck.com/labs/pvsn6t4z (примечание: префиксы не включены)

ul {
  display: flex;
  flex-flow: column wrap;
  align-content: space-between;
  height: 4em;
}

Однако было бы проще просто использовать столбцы, которые имеют лучшую поддержку и не требуют установки определенной высоты:

http://cssdeck.com/labs/dwq3x6vr (примечание: префиксы не включены)

ul {
  columns: 15em;
}

Возможным решением является использование justify-content: flex-start; в контейнере .grid, ограничение размера его дочерних элементов и поля на соответствующих дочерних элементах - в зависимости от необходимого количества столбцов.

Для сетки с тремя столбцами базовый CSS будет выглядеть так:

.grid {
    display: flex;
    flex-flow: row wrap;
    justify-content: flex-start;
}

.grid > * {
    flex: 0 0 32%;
    margin: 1% 0;
}

.grid > :nth-child(3n-1) {
    margin-left: 2%;
    margin-right: 2%;
}

Это еще одно несовершенное решение, но оно работает.

http://codepen.io/tuxsudo/pen/VYERQJ

Если вы хотите выровнять последний элемент по сетке, используйте следующий код:

Сетка контейнерная

.card-grid {
  box-sizing: border-box;
  max-height: 100%;
  display: flex;
  flex-direction: row;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
  justify-content: space-between;
  align-items: stretch;
  align-content: stretch;
  -webkit-box-align: stretch;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
  -ms-flex-flow: row wrap;
  flex-flow: row wrap;
}

.card-grid:after {
  content: "";
  flex: 1 1 100%;
  max-width: 32%;
}

Предмет в сетке

.card {
  flex: 1 1 100%;
  box-sizing: border-box;
  -webkit-box-flex: 1;
  max-width: 32%;
  display: block;
  position: relative;

}

Хитрость заключается в том, чтобы установить максимальную ширину элемента, равную максимальной ширине .card-grid: after.

Живая демоверсия на Codepen

Если вам нужна сетка с некоторым пространством между элементами и элементами, начинающимися без начального пробела, то это простое решение работает:

.grid {
    display: flex;
    flex-flow: row wrap;
    margin: 0 -5px; // remove the inital 5px space
    width: auto;
}
.grid__item {
    width: 25%;
    padding: 0 5px; // should be same as the negative margin above.
}

Если вы хотите, чтобы начальный 5px пробел, то просто удалите отрицательное поле :) Просто.

https://jsfiddle.net/b97ewrno/2/

Принятый ответ, хотя и хороший, приводит к тому, что между элементами во втором ряду нет места.

Да.! Мы можем, но с некоторыми медиа-запросами, и Максимальное количество столбцов предопределено.

Здесь используется 4 столбца. Проверьте мой код:

.container {
  display: flex;
  display: -webkit-flex;
  display: -moz-flex;
  flex-flow: row wrap;
  -webkit-flex-flow: row wrap;
  -moz-flex-flow: row wrap;
}

.container .item {
  display: flex;
  display: -webkit-flex;
  display: -moz-flex;
  justify-content: center;
  -webkit-justify-content: center;
  -moz-justify-content: center;
  flex-basis: 25%; //max no of columns in %, 25% = 4 Columns
}

.container .item .item-child {
  width: 130px;
  height: 180px;
  background: red;
  margin: 10px;
}

@media (max-width: 360px) {
  .container .item {
    flex-basis: 100%;
  }
}

@media (min-width:360px) and (max-width: 520px) {
  .container .item {
    flex-basis: 50%;
  }
}

@media (min-width:520px) and (max-width: 680px) {
  .container .item {
    flex-basis: 33.33%;
  }
}

<div class="container">

  <div class="item">
    <div class="item-child">1</div>
  </div>
  <div class="item">
    <div class="item-child"></div>
  </div>
  <div class="item">
    <div class="item-child"></div>
  </div>
  <div class="item">
    <div class="item-child"></div>
  </div>
  <div class="item">
    <div class="item-child"></div>
  </div>
  <div class="item">
    <div class="item-child"></div>
  </div>
  <div class="item">
    <div class="item-child"></div>
  </div>
  <div class="item">
    <div class="item-child"></div>
  </div>
  <div class="item">
    <div class="item-child"></div>
  </div>
  <div class="item">
    <div class="item-child"></div>
  </div>
  <div class="item">
    <div class="item-child"></div>
  </div>
  <div class="item">
    <div class="item-child"></div>
  </div>
  <div class="item">
    <div class="item-child"></div>
  </div>
  <div class="item">
    <div class="item-child"></div>
  </div>
  <div class="item">
    <div class="item-child"></div>
  </div>
  <div class="item">
    <div class="item-child"></div>
  </div>
  <div class="item">
    <div class="item-child"></div>
  </div>
  <div class="item">
    <div class="item-child"></div>
  </div>
  <div class="item">
    <div class="item-child"></div>
  </div>
  <div class="item">
    <div class="item-child"></div>
  </div>
  <div class="item">
    <div class="item-child"></div>
  </div>
  <div class="item">
    <div class="item-child"></div>
  </div>
  <div class="item">
    <div class="item-child"></div>
  </div>

</div>

Примечание
1) Нет необходимости создавать дочерний div. Это может быть любой другой тег, такой как "img", что бы вы ни хотели.
2) Если вы хотите, чтобы большее количество столбцов настраивало запросы на медиа и максимальное количество столбцов.

Можно использовать "flex-start" и добавить поля вручную. Это требует некоторого взлома математики, но, безусловно, легко сделать и упростить его использование с препроцессором CSS как LESS.

См. например, этот МЕНЬШИЙ mixin:

.flexboxGridMixin(@columnNumber,@spacingPercent) {
  @contentPercent: 100% - @spacingPercent;
  @sideMargin: @spacingPercent/(@columnNumber*2);
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: flex-start;
  > * {
    box-sizing: border-box;
    width: @contentPercent/@columnNumber;
    margin-left: @sideMargin;
    margin-right: @sideMargin;
  }
}

И тогда его можно легко использовать для отображения гибкой сетки:

ul {
  list-style: none;
  padding: 0;
  @spacing: 10%;
  @media only screen and (max-width: 499px) { .flexboxGridMixin(1,@spacing); }
  @media only screen and (min-width: 500px) { .flexboxGridMixin(2,@spacing); }
  @media only screen and (min-width: 700px) { .flexboxGridMixin(3,@spacing); }
  @media only screen and (min-width: 900px) { .flexboxGridMixin(4,@spacing); }
  @media only screen and (min-width: 1100px) { .flexboxGridMixin(5,@spacing); }
}

li {
  background: pink;
  height: 100px;
  margin-top: 20px;
}

Вот пример

http://codepen.io/anon/pen/YyLqVB?editors=110

Я знаю, что здесь есть много ответов, но... Самый простой способ сделать это - использовать grid вместо grid template columns flex и grid template columns с repeat и auto fills, где вам нужно установить количество пикселей, которое вы дали каждому элементу, 100px из вашего фрагмента кода.

.exposegrid {
	display: grid;
	grid-template-columns: repeat(auto-fill, 100px);
	justify-content: space-between;
}

.exposetab {
	width: 100px;
	height: 66px;
	background-color: rgba(255, 255, 255, 0.2);
	border: 1px solid rgba(0, 0, 0, 0.4);
	border-radius: 5px;
	box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.2);
	margin-bottom: 10px;
}

<div class="exposegrid">
   <div class="exposetab"></div>
   <div class="exposetab"></div>
   <div class="exposetab"></div>
   <div class="exposetab"></div>
   <div class="exposetab"></div>
   <div class="exposetab"></div>
   <div class="exposetab"></div>
   <div class="exposetab"></div>
   <div class="exposetab"></div>
   <div class="exposetab"></div>
   <div class="exposetab"></div>
   <div class="exposetab"></div>
   <div class="exposetab"></div>
   <div class="exposetab"></div>
</div>

Предполагая, что:

• Вы хотите 4 столбца сетки с оберткой
• Количество предметов не обязательно кратно 4

Установите левое поле для каждого элемента, кроме 1-го, 5-го и 9-го элемента и т.д. Если левое поле равно 10px, то в каждой строке будет 30px поле, распределенное по 4 элементам. Процентная ширина для элемента рассчитывается следующим образом:

100% / 4 - horizontal-border - horizontal-padding - left-margin * (4 - 1) / 4

Это достойный обходной путь для проблем, связанных с последним рядом flexbox.

.flex {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  margin: 1em 0 3em;
  background-color: peachpuff;
}

.item {
  margin-left: 10px;
  border: 1px solid;
  padding: 10px;
  width: calc(100% / 4 - 2px - 20px - 10px * (4 - 1) / 4);
  background-color: papayawhip;
}

.item:nth-child(4n + 1) {
  margin-left: 0;
}

.item:nth-child(n + 5) {
  margin-top: 10px;
}

<div class="flex">
  <div class="item">1</div>
  <div class="item">2</div>
  <div class="item">3</div>
  <div class="item">4</div>
</div>
<div class="flex">
  <div class="item">1</div>
  <div class="item">2</div>
  <div class="item">3</div>
  <div class="item">4</div>
  <div class="item">5</div>
  <div class="item">6</div>
</div>
<div class="flex">
  <div class="item">1</div>
  <div class="item">2</div>
  <div class="item">3</div>
  <div class="item">4</div>
  <div class="item">5</div>
  <div class="item">6</div>
  <div class="item">7</div>
  <div class="item">8</div>
  <div class="item">9</div>
</div>

О, мальчик, я думаю, что нашел хорошее решение с минимальным CSS и без JS. Проверьте это:

img {width:100%;}
li {
  display: inline-block;
  width:8em;
  list-style:none;
}
ul {text-align: justify;}

<ul>
  <li>
    <img src="http://www.planwallpaper.com/static/images/kitty-cat.jpg" />
  </li>
  <li>
    <img src="http://www.planwallpaper.com/static/images/kitty-cat.jpg" />
  </li>
  <li>
    <img src="http://www.planwallpaper.com/static/images/kitty-cat.jpg" />
  </li>
  <li>
    <img src="http://www.planwallpaper.com/static/images/kitty-cat.jpg" />
  </li>
  <li>
    <img src="http://www.planwallpaper.com/static/images/kitty-cat.jpg" />
  </li>
  <li>
    <img src="http://www.planwallpaper.com/static/images/kitty-cat.jpg" />
  </li>
  <li>
    <img src="http://www.planwallpaper.com/static/images/kitty-cat.jpg" />
  </li>
  <li>
    <img src="http://www.planwallpaper.com/static/images/kitty-cat.jpg" />
  </li>
  <li>
    <img src="http://www.planwallpaper.com/static/images/kitty-cat.jpg" />
  </li>
  <li>
    <img src="http://www.planwallpaper.com/static/images/kitty-cat.jpg" />
  </li>
  <li>
    <img src="http://www.planwallpaper.com/static/images/kitty-cat.jpg" />
  </li>
  <li>
    <img src="http://www.planwallpaper.com/static/images/kitty-cat.jpg" />
  </li>
  <li>
    <img src="http://www.planwallpaper.com/static/images/kitty-cat.jpg" />
  </li>
  <li>
    <img src="http://www.planwallpaper.com/static/images/kitty-cat.jpg" />
  </li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
</ul>

Ключевым моментом здесь является помнить, что то, что мы пытаемся достичь, - это именно то, что text-align: justify делает!

Пустые элементы в HTML есть, чтобы сделать отображение последней строки совершенно без изменения внешнего вида, но может и не понадобиться, учитывая то, что вы пытаетесь достичь. Для идеального баланса в любой ситуации вам нужно как минимум x-4 пустых элемента, x - количество отображаемых элементов, или n-2, n - количество столбцов, которые вы хотите отобразить.

Вы можете достичь этого просто с помощью flex-start и max-width.

https://codepen.io/moladukes/pen/NvzBrQ

.container {
  display: flex;
  justify-content: flex-start;
  flex-flow: row wrap;
}

.item { 
  width: 130px; 
  max-width: 130px; 
  height: 180px; 
  background: red; 
  margin: 20px; 
}

Если ширина дочерних элементов является переменной (приводящей к переменному количеству детей в строке), невозможно сделать это с помощью CSS. Поэтому я перешел на JavaScript, чтобы:

• добавьте элемент .sizer в качестве последнего дочернего элемента, изначально с flex-basis:100%
• постепенно уменьшайте значение flex-basis до тех пор, пока оно не "скачет" в предыдущей строке (или не достигнет flex-basis:0%)
• когда это происходит, оно подталкивает все элементы в последней строке в начале строки: работа выполнена!

Рабочий, общий пример:

// first part of the script generates cards with random words, ignore it

let words = [
  'interesting',
  'tongue',
  'excellent',
  'start',
  'sticky',
  'lame',
  'lopsided',
  'ill-informed',
  'terrible',
  'reduce',
  'near',
  'order'
]
for (var i = 0; i < 20; i++) {
  let text = '';
  for (var j = 0; j < 3; j++) {
    text += words[parseInt(Math.random() * words.length)] + ' '
  }
  $('.container').append($('<div />', {
    class: 'card',
    text: text
  }))
}

// the juice starts here:

$('.container').append(
  $('<div />', {
    class:'sizer'
  }));

let topSizer = $('.sizer')[0].getBoundingClientRect().top,
    perCent = 100;
    
while ( $('.sizer')[0].getBoundingClientRect().top === topSizer &&
        topSizer > 0 ) {
    $('.sizer').css({flexBasis:(perCent--)+'%'});
}

.container {
  display: flex;
  flex-flow: row wrap;
  align-content: flex-start;
}

.card {
  flex: 1 1 0;
  padding: .8rem;
  border: 1px solid #ccc;
  margin: 0 -1px -1px 0;
}
.sizer {
  flex-basis: 100%;
}

<script src="/jquery.min.js"></script>
<div class="container"></div>

В то время как script довольно общий, он демонстрирует принцип. Вероятно, вы должны использовать более конкретные имена классов в реальном сценарии.

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

Это комбинация многих ответов, но она делает именно то, что мне нужно - то есть, выравнивание последнего дочернего элемента в контейнере flex слева, сохраняя при этом пространство-поведение (в этом случае оно трех столбцов).

Здесь разметка:

.flex-container {
  display: flex;
  justify-content: space-between;
  flex-direction: row;
}

.flex-container:after {
  content: "";
  flex-basis: 30%;
}

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

.grid {
  display: flex;
  flex-flow: row wrap;
  justify-content: space-between;
}

.grid > *:last-child {
  flex-grow: 1;
}

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

Это довольно хаки, но это работает для меня. Я пытался достичь согласованных интервалов/полей.

.grid {
  width: 1024px;
  display: flex;
  flex-flow: row wrap;
  padding: 32px;
  background-color: #ddd;  

  &:after {
    content: "";
    flex: auto;
    margin-left:-1%;
  }

  .item {
    flex: 1 0 24.25%;
    max-width: 24.25%;
    margin-bottom: 10px;
    text-align: center;
    background-color: #bbb;

    &:nth-child(4n+2),
    &:nth-child(4n+3),
    &:nth-child(4n+4) {
      margin-left: 1%;
    }

    &:nth-child(4n+1):nth-last-child(-n+4),
      &:nth-child(4n+1):nth-last-child(-n+4) ~ .item {
        margin-bottom: 0;
    }    

  }
}

http://codepen.io/rustydev/pen/f7c8920e0beb0ba9a904da7ebd9970ae/

Вот еще несколько scss mixins.

Эти миксины предполагают, что вы не собираетесь использовать js-плагины, такие как Isotope (они не уважают порядок разметки html, тем самым испорчая css nth правилами).

Кроме того, вы сможете полностью использовать их, особенно если вы пишете свои отзывчивые точки останова на мобильном телефоне в первую очередь. В идеале вы будете использовать flexbox_grid() на меньшей точке останова и flexbox_cell() на следующих контрольных точках. flexbox_cell() позаботится о сбросе ранее установленных полей, которые больше не используются для больших точек останова.

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

Здесь код:

// apply to the container (for ex. <UL> element)
@mixin flexbox_grid($columns, $gutter_width){

  display: flex;
  flex-direction:row;
  flex-wrap:wrap;
  justify-content: flex-start;

  > *{
    @include flexbox_cell($columns, $gutter_width);
  }
}

// apply to the cell (for ex. a <LI> element)
@mixin flexbox_cell($columns, $gutter_width){
  $base_width: 100 / $columns;
  $gutters: $columns - 1;
  $gutter_offset: $gutter_width * $gutters / $columns;

  flex-grow: 0;
  flex-shrink: 1;
  flex-basis: auto; // IE10 doesn't support calc() here

  box-sizing:border-box; // so you can freely apply borders/paddings to items
  width: calc( #{$base_width}% - #{$gutter_offset} );

  // remove useless margins (for cascading breakponts)
  &:nth-child(#{$columns}n){
    margin-right: 0;
  }

  // apply margin
  @for $i from 0 through ($gutters){
    @if($i != 0){
      &:nth-child(#{$columns}n+#{$i}){
        margin-right: $gutter_width;
      }
    }
  }
}

Использование:

ul{
   // just this:
   @include flexbox_grid(3,20px);
}

// and maybe in following breakpoints, 
// where the container is already setted up, 
// just change only the cells:

li{
   @include flexbox_cell(4,40px);
}

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

Надеюсь, что это поможет!

Эта версия - лучший способ для блоков с фиксированной шириной:

http://codepen.io/7iomka/pen/oxxeNE

В других случаях - версия dalgard

http://codepen.io/dalgard/pen/Dbnus

body {
  padding: 5%;
}

div {
  overflow: hidden;
  background-color: yellow;
}

ul {
  display: flex;
  flex-wrap: wrap;
justify-content:center;
  margin: 0 -4px -4px 0;
  list-style: none;
  padding: 0;
}

li {
  flex: 1 0 200px;
  height: 200px;
  max-width:200px;
  min-width:200px;
  border-right: 4px solid black;
  border-bottom: 4px solid black;
  background-color: deeppink;
}
li:empty {
  height: 0;
  border: none;
}

*,
:before,
:after {
  box-sizing: border-box;
}

<div>
  <ul>
    <li>a</li>
    <li>b</li>
    <li>c</li>
    <li>d</li>
    <li>e</li>
    <li>f</li>
    <li>g</li>
    <li>h</li>
    <li>i</li>
    <li>j</li>
    <li>k</li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
  </ul>
</div>

Я сделал для него SCSS-микс.

@mixin last-row-flexbox($num-columns, $width-items){

  $filled-space: $width-items * $num-columns;
  $margin: calc((100% - #{$filled-space}) / (#{$num-columns} - 1));

  $num-cols-1 : $num-columns - 1;

  &:nth-child(#{$num-columns}n+1):nth-last-child(-n+#{$num-cols-1}) ~ & {
    margin-left: $margin;
  }
  @for $i from 1 through $num-columns - 2 { 
    $index: $num-columns - $i;
    &:nth-child(#{$num-columns}n+#{$index}):last-child{
      margin-right: auto;
    }
  }
}

Это кодовая ссылка: http://codepen.io/diana_aceves/pen/KVGNZg

Вам просто нужно установить ширину элементов в процентах и ​​количестве столбцов.

Надеюсь, это поможет вам.

Используя flexbox и несколько медиа-запросов, я сделал эту небольшую работу: http://codepen.io/una/pen/yNEGjv (ее немного взломало, но работает ):

.container {
  display: flex;
  flex-flow: row wrap;
  justify-content: flex-start;
  max-width: 1200px;
  margin: 0 auto;
}

.item {
  background-color: gray;
  height: 300px;
  flex: 0 30%;
  margin: 10px;

  @media (max-width: 700px) {
     flex: 0 45%;
  }

  @media (max-width: 420px) {
    flex: 0 100%;
  }

  &:nth-child(3n-1) {
    margin-left: 10px;
    margin-right: 10px;
  }
}

Существует способ без flexbox, хотя вам необходимо выполнить следующие условия. 1) У контейнера есть прокладка. 2) Элементы одного размера, и вы точно знаете, сколько вы хотите в каждой строке.

ul {
  padding: 0 3% 0 5%;
}
li {
  display: inline-block; 
  padding: 0 2% 2% 0;
  width: 28.66%;
}

Чем меньше заполнение в правой части контейнера, тем больше добавляется дополнение к каждому элементу списка. Предполагая, что другие элементы в том же родительском объекте, что и объект списка, заполняются с 0% 5%, он будет заподлицо с ними. Вы также можете настроить проценты на любой размер, который вам нужен, или использовать значения вычислений px.

Конечно, вы можете сделать то же самое без заполнения в контейнере, используя nth-child (IE 9+) для удаления поля на каждом третьем поле.

Вы хотите выровнять

использовать align-content: flex-start; вместо justify-content: space-between;

это тянет элементы в последнюю строку слева, а также равномерно распределяет пространство,

.container {
  display: flex;
  flex-flow: row wrap;
  align-content: flex-start;
  /*justify-content: space-between; remove this line!!!! */ 
}

https://codepen.io/anon/pen/aQggBW?editors=1100

Решение ДэнАндерсон НЕ ДИНАМИЧНОЕ. ПЕРИОД !!

когда ширина элемента изменена с 25 на 28, Дэн Андерсон пропускает пробел между изображениями

ДэнАндерсон: https://codepen.io/anon/pen/ZwYPmB?editors=1100

динамический: https://codepen.io/anon/pen/aQggBW?editors=1100

вот что я пытался сказать. Данс это хакер.....

Я смог сделать это с помощью justify-content: space-between на контейнере