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

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
Есть ли способ сделать это без flexbox, который мы могли бы пропустить? James Simpson
Подождите несколько лет. Flexbox уровня 2, вероятно, добавит некоторые функции для решения этой проблемы. Oriol
Вы можете попасть в сложные хаки, если нужно, но я не знаю ни одного простого или простого решения CSS. Michael_B

Ваш Ответ

3   ответа
-3

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

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

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

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

Ширина не должна быть там и не в коде в вопросе. Что делает это трудным, так это тот факт, что он должен быть отзывчивым, и мы не знаем, насколько широким будет контейнер, и поэтому не знаем, сколько элементов в строке. James Simpson
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>

Это работает как очарование для меня - спасибо! :) iamkeir
@vals, но как мы можем узнать максимум, когда ширина экрана может быть чем угодно? Michael_B
Я отредактировал фрагмент, чтобы показать его. Надеюсь, вы не возражаете :-) vals
Это сработало бы, только если бы мы знали, сколько было подряд (я заметил, что разместил неправильную ссылку, она не должна была иметь ширину 500 пикселей в скрипте, которую я сейчас обновил). James Simpson

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