Выровненная слева и центрированная сетка с flexbox

Я хотел бы реализовать гибкий сетчатый макет с помощью flexbox (без медиа-запросов). В сетке может быть переменное количество элементов. Каждый элемент должен иметь фиксированную и равную ширину. Элементы должны быть выровнены влево. Вся группа должна иметь равные левый и правый поля.

Это должно выглядеть так:

Вот как я пытался добиться этого:

.container {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  margin: auto;
}
.item {
  height: 200px;
  width: 200px;
  background-color: purple;
  padding: 10px;
  margin: 10px;
}

<div class="container">
  <div class="item">Flex item 1</div>
  <div class="item">Flex item 2</div>
  <div class="item">Flex item 3</div>
  <div class="item">Flex item 4</div>
  <div class="item">Flex item 5</div>
</div>

Ответы

Ответ 1

Одно довольно простое решение - просто добавить много невидимых предметов нулевой высоты в конце ваших обычных предметов:

<div class="parent">
  <div class="item">1</div>
  <div class="item">2</div>
  <div class="item">3</div>
  <div class="item">4</div>
  <div class="dummyItem"></div>
  <div class="dummyItem"></div>
  <div class="dummyItem"></div>
  <div class="dummyItem"></div>
</div>

а также

.parent {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
}

.parent .item,
.parent .dummyItem{
  width: 50px;
  height: 50px;
  background: white;
  margin: 5px;
}

.parent .dummyItem {
  height: 0;
}

Если в вашей самой длинной строке может быть n видимых элементов, вам понадобится как минимум n-1 фиктивных элементов, чтобы это работало.

Единственное, что немного не так с этим, это то, что если есть только один ряд, то элементы не будут центрированы; вместо этого они будут выровнены (примерно) влево.

Ссылка на Codepen.

Ответ 2

Вы не можете достичь этого с помощью flexbox из коробки (по крайней мере, мне это не удалось). Вы можете попробовать с помощью justify-content: center;, но это будет сосредоточено на всех мелочах, и вы получите что-то вроде:

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

Пожалуйста, смотрите этот CodePen http://codepen.io/justd/pen/rOeMGZ

Я уверен, что вы найдете что-то для вас, просто попробуйте объединить различные методы CSS.

Ответ 3

Мне не удалось добиться такого поведения с помощью flexbox. Но это довольно просто с CSS Grid. Вам необходимо применить justify-content: center к контейнеру.

Пример на CodePen

Ответ 4

Если вы установите явную ширину в контейнере, вы можете применить margin: 0 auto к содержащему элементу, поскольку он больше не охватывает всю ширину окна.

Вот пример Codepen того, что вы ищете: http://codepen.io/alexverner/pen/MaExqb

Ответ 5

CSS Grid

Решение CSS Grid - единственное элегантное и гибкое решение CSS.

.container {
  display: grid;
  grid-template-columns: repeat(auto-fill, 200px);
  grid-auto-rows: 200px;
  grid-gap: 10px;
  justify-content: center;
}

.item {
  background-color: purple;
  padding: 10px;
}

<div class="container">
  <div class="item">Flex item 1</div>
  <div class="item">Flex item 2</div>
  <div class="item">Flex item 3</div>
  <div class="item">Flex item 4</div>
  <div class="item">Flex item 5</div>
</div>

Ответ 6

Вам нужно добавить flex: 0 1 auto в селектор .item. Это означает, что

0: все элементы занимают одно и то же пространство
1: всем элементам разрешено сокращаться
авто: автоматически вычисляет ширину, нет минимума.

Ответ 7

Думаю, вам просто нужно предоставить вашему контейнеру сетки какой-то max-width, тогда ваши автопоставки тоже будут работать. Что происходит, ваш контейнер расширяется на 100% с обеих сторон, поэтому нет ничего для автоматической маржи, с которой можно работать.

Итак, если вы хотите, чтобы он расширялся до 3 элементов на строку max, просто установите для параметра max-width значение 660 (ширина позиции + позиция поля):

.container {
  max-width: 660px;
  margin: 0 auto;
  display: flex;
  flex-flow: row-wrap;
}
.item {
  width: 200px;
  height: 200px;
  margin: 10px;
}

Здесь a Codepen: http://codepen.io/kgrote/pen/qbpGWZ

Контейнер будет гибко расширяться до тех пор, пока не будет достигнута максимальная ширина, а затем центрируется, сохраняя свои дети в сетке с выравниванием по левому краю. Когда контейнер сжимается, дети будут складываться по мере необходимости.