Несогласованный запас между элементами гибкости в последней строке

Я использую flex. Кажется, что существует неожиданная разница в разнице между двумя элементами div - третья строка имеет разное поле между div, чем первые две строки:

Как изменить код так, чтобы край третьей строки был таким же, как первые две строки?

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

.container:after {
  flex: 1;
  content: '';
}

.container form {
  width: 100%;
  display: flex;
}

.container .comment {
  flex: 1;
}

.square {
  padding: 10px;
  width: calc(100% / 9);
  margin: 0.7vw 0 0.7% 1vw;
  background: red;
}

<div class="container">
  <form method="post" style="margin: 0.7vw 0 0.7% 1vw;">
    <input class="comment" type="text">
    <input type="submit">
  </form>

  <div class="square">
  </div>
  <div class="square">
  </div>
  <div class="square">
  </div>
  <div class="square">
  </div>
  <div class="square">
  </div>
  <div class="square">
  </div>
  <div class="square">
  </div>
  <div class="square">
  </div>
  <div class="square">
  </div>
  <div class="square">
  </div>
  <div class="square">
  </div>
  <div class="square">
  </div>
  <div class="square">
  </div>
  <div class="square">
  </div>
</div>

Ответ 1

Существует несколько разных способов сделать это, в зависимости от того, как вы хотите, чтобы "квадраты" отвечали:

flex-grow:

.square {
    flex-grow: 1;
    padding: 10px;
    width: calc(100% / 9);
    margin: 0.7vw 0 0.7% 1vw;
    background: red;
}

Fiddle: https://jsfiddle.net/4ydyoqmx/2/

inline-block:

.square {
    display: inline-block;
    padding: 10px;
    width: calc(100% / 9);
    margin: 0.7vw 0 0.7% 1vw;
    background: red;
}

Fiddle: https://jsfiddle.net/4ydyoqmx/4/

Третий вариант:

Удалено content: '' из .container:after, потому что это вызывало проблемы

Ответ 2

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

Да, это делается для нейтрализации эффекта justify-content: space-between на двух элементах flex, что заставляет их появляться на противоположных концах...

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

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

Добавьте невидимые элементы гибкости после последнего реального элемента.

В приведенном ниже примере я добавил в ваш код семь phantom элементов.

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

/*
.container:after {
  flex: 1;
  content: '';
}
*/

.invisible { visibility: hidden; }

.container form {
  width: 100%;
  display: flex;
}

.container .comment {
  flex: 1;
}

.square {
  padding: 10px;
  width: calc(100% / 9);
  margin: 0.7vw 0 0.7% 1vw;
  background: red;
}

<div class="container">
  <form method="post" style="margin: 0.7vw 0 0.7% 1vw;">
    <input class="comment" type="text">
    <input type="submit">
  </form>

  <div class="square"></div>
  <div class="square"></div>
  <div class="square"></div>
  <div class="square"></div>
  <div class="square"></div>
  <div class="square"></div>
  <div class="square"></div>
  <div class="square"></div>
  <div class="square"></div>
  <div class="square"></div>
  <div class="square"></div>
  <div class="square"></div>
  <div class="square"></div>
  <div class="square"></div>
  
  <div class="square invisible"></div>
  <div class="square invisible"></div>
  <div class="square invisible"></div>
  <div class="square invisible"></div>
  <div class="square invisible"></div>
  <div class="square invisible"></div>
  <div class="square invisible"></div>
</div>

Ответ 3

Это значение justify-content: space-between на .container, которое делает это (в сочетании с flex-wrap: wrap;): Он явно распределяет элементы в тех строках, которые заполнены, но в последней строке, которая не выглядит хорошо, поэтому она оставляет предопределенное/по умолчанию поле между этими элементами. (Это похоже на оправданный текст)

Одна из возможностей избежать этого - просто стереть justify-content: space-between, тем самым установив его на выравнивание по умолчанию left (но они больше не будут распространяться по всей ширине):

https://jsfiddle.net/h8ejaob7/

Ответ 4

Это делается так, потому что вы оправдываете контент, используя пробел между ними. Таким образом, на экране он не может разместить 7-й div, поэтому он помещает только 6 div на экран и помещает равное пространство между 6 элементами div. Но в последней строке есть только 2 div, так что ваша 3-я строка не будет полностью заполнена элементами div, Вот почему он не кладет пространство, как на верхней строке div.

Если вы поместите еще 4 div, вы получите точный эффект, как в верхней строке.

Ответ 5

Эта проблема может быть решена путем добавления этого фрагмента кода в ваш css..

*{margin:0px;
padding:0px}

Надеюсь, что это сработает.