it-swarm.com.ru

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

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

Мне также нужно, чтобы они были выровнены с помощью 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

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

 enter image description here

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

6
James Simpson

Выравнивание последней строки - распространенная проблема с 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;
}

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

3
Michael_B

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

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

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

1
Joshua Ogle