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

У меня есть простая схема flex-box с контейнером, как:

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

Теперь я хочу, чтобы элементы в последнем ряду были выровнены с другим. justify-content: space-between; следует использовать, потому что ширина и высота сетки могут быть скорректированы.

В настоящее время это выглядит как

Элемент в правом нижнем углу должен быть посередине

Здесь я хочу, чтобы элемент в правом нижнем углу находился в "средней колонке". Какой самый простой способ сделать это? Вот небольшой jsfiddle, который показывает это поведение.

Источник

38 ответов

Решение

Добавить ::after который заполняет пространство. Не нужно загрязнять ваш HTML. Вот кодекс, показывающий это: http://codepen.io/DanAndreasson/pen/ZQXLXj

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

.grid::after {
  content: "";
  flex: auto;
}
Источник

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

Однако, для чего это стоит: с модулем CSS Grid Layout это удивительно легко создать:

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

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 - заставляя элементы расширяться, чтобы занять оставшееся пространство. Это привело бы к оправданному расположению "промежутков", когда сетка имеет только одну строку, что в нашем случае не то, что мы хотим. (посмотрите это демо, чтобы увидеть разницу между ними)).

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 ( измените размер, чтобы увидеть эффект)

Источник

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

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),

Источник

Без какой-либо дополнительной разметки, просто добавив ::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>
Источник

Я знаю, что здесь есть много ответов, но.. Самый простой способ сделать это с grid вместо 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>

Источник

Ты не можешь 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 контейнер, ограничения на размер его дочерних элементов и поля соответствующих дочерних элементов - в зависимости от желаемого числа столбцов.

Для сетки с 3 столбцами базовый 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

Источник

Также вы можете сделать это:

      .exposegrid:last-child {
  margin-right: auto;
}
Источник

Эта проблема была решена для меня с помощью сетки CSS,

Это решение применимо, только если у вас есть фиксированное количество столбцов, т.е. нет. элементов для отображения в одной строке

-> с использованием сетки, но без указания количества строк, поскольку количество элементов увеличивается, он переносится в столбцы и динамически добавляет строки, в этом примере я указал три столбца

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

.grid-class{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  column-gap: 80px;
}

Источник

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

.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 пробел, то просто удалите отрицательное поле:) Просто.

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

Источник

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

Здесь я использую 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' r, что вы хотите..
2) Если вы хотите больше столбцов, настройте медиазапросы и максимальное количество столбцов.

Источник

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

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

.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

Источник

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

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

.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

Источник

Если вы хотите выровнять элемент в виде сетки с равным расстоянием даже для последнего элемента. Убедитесь, что ширина карты 100%. Используйте следующий CSS. Это работает очень хорошо

      .container {
  /* ... snip ... */
  display: grid;
  grid-template-columns: repeat(auto-fill, 100px);
  justify-content: space-between;
  grid-gap: 20px;
}
Источник

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

Вот разметка:

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

.flex-container:after {
  content: "";
  flex-basis: 30%;
}
Источник

Просто добавьте несколько фальшивых элементов с такими же свойствами, за исключением высоты, установленной на 0 пикселей до конца.

Источник

Вы можете добиться этого просто с помощью 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; 
}
Источник

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

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

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

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

Источник

Несмотря на то, что в Flexbox появляется пробел, я добавлю работающее решение.

Он использует комбинатор братьев и сестер для проверки 2 условий.

Первое условие, которое он проверяет, - является ли элемент предпоследним. div:nth-last-child(2)

Для макетов с 4 столбцами нам нужно проверить позиции 2 и 3 Проверить, находится ли он во второй строке из 4 div:nth-of-type(4n+2) или третий по счету div:nth-of-type(4n+3)

Для макетов с 3 столбцами нам нужно только проверить позицию 2

      div:nth-of-type(3n+2)

Затем мы можем объединить, как показано ниже, для макетов из 4 столбцов.

      div:nth-last-child(2) + div:nth-of-type(4n+2)

div:nth-last-child(2) + div:nth-of-type(4n+3)

Нам также нужно позаботиться об одном граничном случае. Любое число, которое равно 3n + 2 и кратно 4, получит маржу справа 35%. div:nth-last-child(2) + div:nth-of-type(4n+4)

3 столбца макета будут

      div:nth-last-child(2) + div:nth-of-type(3n+2)

Затем нам нужно добавить запас к указанным выше селекторам. Правое поле должно быть рассчитано и будет зависеть от гибкого базиса.

Я добавил образец с 3 и 4 столбцами и медиа-запрос. Я также добавил небольшую кнопку JavaScript, которая добавляет новый div, чтобы вы могли проверить его работу.

Это немного CSS, но он работает. Я также написал об этом на своем сайте, если вы хотите еще немного пояснить.https://designkojo.com/css-programming-using-css-pseudo-classes-and-combinators

Источник

Мне понравилась простота ответа @Dan Andreasson & @Robin Métral... однако мне это не совсем помогло.

Итак, вместо:

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

Я использовал:

      .grid {
display: flex;
flex-flow: row wrap;
justify-content: space-between;
}
.grid::after {
content: "";
width: calc(100%/3 - 20px); /* whatever width grid items are */
}

до сих пор, похоже, работает так, как задумано.

Источник

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

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

В остальных случаях - версия Далгарда

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>

Источник

Используя 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;
  }
}
Источник

Если ширина дочерних элементов является переменной (что приводит к переменному количеству дочерних элементов в строке), это невозможно сделать с помощью 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="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container"></div>

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

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

Источник

Есть способ без 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+) для удаления полей в каждом третьем блоке.

Источник

Здесь есть решения, в которых люди предлагают написать точные макеты css-классов, подделать последний элемент с помощью псевдоэлемента, использовать подходы, отличные от flexbox и т. Д.

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

Источник

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

      .parent {
display:flex;
flex-wrap: wrap;
justify-content: space-between;
}

и просто добавь::afterэто этот родитель

      .parent::after {
content: "";
flex-basis: 30% /* give it the same width of your child or item; */
}

и вы исправите это сейчас, даже если вы добавите больше дочерних элементов или элементов, он не переполнится

Источник

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

  • Вы хотите 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;
  background-color: peachpuff;
}

.item {
  margin-left: 10px;
  border: 1px solid;
  padding: 10px;
  width: calc(100% / 4 - 22px - 2px - 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>

Источник

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

Пример: 3 элемента подряд, промежуток между элементами 10 пикселей.

div:last-child:nth-child(3n+2) {
  flex-grow: 1
  margin-left: 10px
}
Источник

О, парень, я думаю, что нашел хорошее решение с минимальным 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 - это количество столбцов, которые вы хотите отобразить.

Источник

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

.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/

Источник
Другие вопросы по тегам