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

Question

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

6

Задан 02 Dec 2016, 16:13 от James Simpson

6

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

Таргетирование флекс-элементов в последнем ряду 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)?

Выравнивание последней строки в flex-контейнере, вероятно, сегодня является отсутствующей функцией # 1 в flexbox. Другой распространенной проблемой являются различные недостаткиcolumn wrap, Надеемся, что оба будут рассмотрены в следующей версии спецификации flexbox. Michael_B

02 Dec 2016, 16:45

Есть ли способ сделать это без flexbox, который мы могли бы пропустить? James Simpson

02 Dec 2016, 16:48

Подождите несколько лет. Flexbox уровня 2, вероятно, добавит некоторые функции для решения этой проблемы. Oriol

02 Dec 2016, 16:35

Вы можете попасть в сложные хаки, если нужно, но я не знаю ни одного простого или простого решения CSS. Michael_B

05 Dec 2016, 18:47

3 ответа

Похожие вопросы

от 1 · Answer 1 · 08 Dec 2016, 16:22

Переполнение стека не позволит мне прокомментировать ответ 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)

от Joshua Ogle · Answer 2 · 02 Dec 2016, 15:55

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

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

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

от 155k · Answer 3 · 02 Dec 2016, 15:21

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

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