Как я могу центрировать гибкие строки, сохраняя при этом гибкие элементы выровненными по левому краю?

Question

Примерно так:

justify-content: center; приближает меня, но это центрирует все элементы в гибком контейнере. Я хотел бы, чтобы элементы были выровнены по левому краю, а обернутые строки под ними центрировали.

Answer 1

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

Codepen здесь

ul {
  width: auto;
  max-width: 600px;
  margin: 0 auto 0 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}
li {
  width: calc((100% / 3) - 20px);
  height: 80px;
  background: #333;
  margin: 10px;
}

Answer 2

Поскольку вы не предоставили никакого кода, это одно из решений, но в этом случае вам нужно сохранить верхние и нижние строки в отдельных div:

        .item{
            min-width:45%;
            min-height: 80px;
            margin-right: 10px;
            background-color: black;
        }
        .top-row,.bottom-row{
            display: flex;
            justify-content: space-between;
            width: 30%;
            margin-bottom: 1em;
        }
        .bottom-row{
            justify-content: center;
        }

    <div class="top-row">
        <div class="item"></div>
        <div class="item"></div>
    </div>
    <div class="bottom-row">
        <div class="item"></div>
    </div>

Answer 3

Попробуйте margin: 0 auto; в дочернем элементе

.wrap {
  display: flex;
  flex-wrap: wrap;
  width: 120px; /* screen width  */

}

.block {
  width: 50px;
  height: 50px;
  background: red;
  margin: 0 auto;
}

<div class="wrap">
      <div class="block"></div>
      <div class="block"></div>
      <div class="block"></div>
    </div>