Держите обернутые гибкие предметы слева, пока другие находятся в центре

Question

Я пытаюсь отобразить список элементов flex с фиксированной шириной в центре flexbox с переносом, используя margin: auto.Когда происходит обтекание, обернутый предмет также центрируется в своем собственном контейнере:

Есть ли способ сохранить обернутый предмет слева, а все остальноепо центру?

.parent {
  display: flex;
  flex-wrap: wrap;
  height: 100px;
}

.children {
  flex: 1;
  border: 1px solid black;
  max-width: 300px;
  min-width: 300px;
  margin: auto;
  height: 100px;
  margin-top: 1rem;
}

<div class="parent">
  <div class="children"></div>
  <div class="children"></div>
  <div class="children"></div>
  <div class="children"></div>
  <div class="children"></div>
</div>

Answer 1

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

Проблема заключается в том, что в flex-файле действительно нет выравнивания по левому краю.контейнер.Все по центру, на основе доступного пространства в ряду.Таким образом, отдельный элемент в последнем ряду не имеет понятия о том, что происходит выше, и не имеет отношения к чему-либо.

Вот что произойдет, если выровнять по левому краю последний элемент (на более широких экранах):

.parent {
  display: flex;
  flex-wrap: wrap;
}

.children {
  border: 1px solid black;
  max-width: 300px;
  min-width: 300px;
  margin: auto;
  height: 100px;
  margin-top: 1rem;
}

.children:last-child {
  margin-left: 0;
}

<div class="parent">
  <div class="children"></div>
  <div class="children"></div>
  <div class="children"></div>
  <div class="children"></div>
  <div class="children"></div>
</div>

Вам нужна вложенная сеточная структура.

Сетка верхнего уровня для установления центрирования.

Aвложенная сетка для переноса.

В демонстрационном примере ниже вы найдете сетку из трех столбцов.Левый и правый столбцы - это пустые (разделительные) элементы, созданные с помощью псевдоэлементов CSS и имеющие одинаковую ширину.Это центрует средний элемент.

Средний элемент также является контейнером сетки.С помощью функций repeat() и auto-fill элементы можно переносить, а отдельные элементы выравнивать по левому краю.

body {
  display: grid;
  grid-template-columns: auto 1fr auto;
}

body::before,
body::after {
  content: ''; /* in grid (and flex) layouts, pseudo-elements on the container
                  are treated as items */
}

.parent {
  display: grid;
  grid-template-columns: repeat(auto-fill, 300px);
  grid-auto-rows: 100px;
  grid-gap: 10px;
  justify-content: center; /* centers the columns (not the items, like in flex) */
}

.children {
  border: 1px solid black;
}

<div class="parent">
  <div class="children"></div>
  <div class="children"></div>
  <div class="children"></div>
  <div class="children"></div>
  <div class="children"></div>
</div>

jsFiddle demo