Выровняйте по левому краю последний ряд flexbox, используя пробел и поля [дубликаты]

На этот вопрос уже есть ответ здесь:

Таргетирование флекс-элементов в последнем ряду 3 ответа

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

Мне также нужно, чтобы они были оправданыspace-between и последний ряд выровнен по левому краю.

Я пытаюсь сделать это с flexbox, например, так:

.outside {
  border: 1px solid black;
}
.container {
  margin: -5px;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}
.container:after {
  content: '';
  flex: auto;
}
.box {
  background: red;
  width: 50px;
  height: 50px;
  margin: 5px;
}
<div class="outside">
  <div class="container">
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
  </div>
</div>

Посмотреть JSFiddle

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

Есть ли способ заставить это работать, если мы не знаем, сколько будет столбцов (используя flexbox или что-то еще, кроме javascript)?

 Michael_B02 дек. 2016 г., 17:45
Выравнивание последней строки в flex-контейнере, вероятно, сегодня является отсутствующей функцией # 1 в flexbox. Другой распространенной проблемой являются различные недостаткиcolumn wrap, Надеемся, что оба будут рассмотрены в следующей версии спецификации flexbox.
 James Simpson02 дек. 2016 г., 17:48
Есть ли способ сделать это без flexbox, который мы могли бы пропустить?
 Oriol02 дек. 2016 г., 17:35
Подождите несколько лет. Flexbox уровня 2, вероятно, добавит некоторые функции для решения этой проблемы.
 Michael_B05 дек. 2016 г., 19:47
Вы можете попасть в сложные хаки, если нужно, но я не знаю ни одного простого или простого решения CSS.

Ответы на вопрос(3)

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

.outside {
  border: 1px solid black;
}
.container {
  margin: -5px;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}
.container:after {
  content: '';
  flex: auto;
}
.box {
  background: red;
  width: 50px;
  height: 50px;
  margin: 5px;
}

.hidden {
  visibility: hidden;
  margin: 0 5px;
  height: 0;
}
<div class="outside">
  <div class="container">
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box hidden"></div>
    <div class="box hidden"></div>
    <div class="box hidden"></div>
    <div class="box hidden"></div>
    <div class="box hidden"></div>
    <div class="box hidden"></div>
    <div class="box hidden"></div>
    <div class="box hidden"></div>
    <div class="box hidden"></div>
    <div class="box hidden"></div>
    <div class="box hidden"></div>
    <div class="box hidden"></div>
    <div class="box hidden"></div>
  </div>
</div>

 iamkeir28 авг. 2017 г., 16:27
Это работает как очарование для меня - спасибо! :)
 Michael_B02 дек. 2016 г., 18:41
@vals, но как мы можем узнать максимум, когда ширина экрана может быть чем угодно?
 vals02 дек. 2016 г., 18:40
Я отредактировал фрагмент, чтобы показать его. Надеюсь, вы не возражаете :-)
 James Simpson02 дек. 2016 г., 17:27
Это сработало бы, только если бы мы знали, сколько было подряд (я заметил, что разместил неправильную ссылку, она не должна была иметь ширину 500 пикселей в скрипте, которую я сейчас обновил).
 vals02 дек. 2016 г., 18:37
Вам не нужно знать, сколько предметов подряд. Вам просто нужно знатьмаксимальная количество элементов, которое может быть в строке, и установите столько скрытых полей, сколько это максимальное
 Steve D23 авг. 2018 г., 15:47
Это ужасно грязно, но это работает, и я не могу найти лучшего способа. Итак +1 :)
 vals02 дек. 2016 г., 18:57
Конечно, вы не можете знать это всегда, но в большинстве случаев ... Скажите, что вы исправляете это для максимальной ширины 2000 пикселей ... Является ли реальной проблемой то, что кто-то будет использовать более широкий экран и увидит, что он не совсем выравнивается? Во всяком случае, я просто хотел сделать проблему яснее ...
 Michael_B02 дек. 2016 г., 18:16
Да, я вижу, вы обновили свой код для удаления ширины контейнера. Без этого ограничения вам, возможно, придется прибегнуть к JS, так как я не верю, что современные технологии CSS могут решить эту проблему. Я оставлю свой ответ как есть для общего пользования.

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

  /**
   * @param {Integer} numElements The number of elements you're displaying.
   * @param {Number} element Width Width, in pixels, of each element.
   * @param {Number} margin Width, in pixels. Your minimum target margin between items. 2x the margin on each individual item.
   * @param {Number} containerWidth Width, in pixels, of the containing element.
   */
  const getNumPhantomElements = ({numElements, elementWidth, margin, containerWidth}) => {
    const elementsPerRow = Math.floor(containerWidth / (elementWidth + margin));
    const elementsInLastRow = numElements % elementsPerRow;
    const numPhantomElements = elementsPerRow - elementsInLastRow;

    return numPhantomElements;
  };

В этом случае:

const containerWidth = document.querySelector('.container').offsetWidth;
const numPhantomElements = getNumPhantomElements({
  numElements: 21,
  elementWidth: 50,
  margin: 10, // 2x 5px margin on each box
  containerWidth
}); // Append this many elements (output depends on your viewport size)

space-between а затем выберите последнюю строкуflex-start, Часть, которая торчит мне, хотя это указанная ширина. Это важно?

Если нет, то обычным способом сделать это будет использование медиазапросов для контроля количества элементов, отображаемых в строке. Вы можете установить множество шагов медиазапроса, чтобы убедиться, что элементы не растягиваются слишком сильно, но таким образом пространство между более близкими линиями выравнивается с вашими обычными сеточными желобами, и это устраняет «проблему последней строки». Думаешь, это сработает?

Пример:http://codepen.io/anon/pen/JbpPKa

 James Simpson02 дек. 2016 г., 18:06
Ширина не должна быть там и не в коде в вопросе. Что делает это трудным, так это тот факт, что он должен быть отзывчивым, и мы не знаем, насколько широким будет контейнер, и поэтому не знаем, сколько элементов в строке.

Ваш ответ на вопрос