как дочерние элементы автоматически оставляются, когда дочерний элемент пропускает один меньше, используя css3 flex

Question

Пример ：

* {
  padding: 0;
  margin: 0;
}

ul {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  align-items: flex-start;
}

li {
  background-color: green;
  flex-basis: 31%;
  min-height: 100px;
}

<ul>
  <li>1</li>
  <li>2</li>
  <li>3</li>
  <li>4</li>
  <li>5</li>
  <li>6</li>
  <li>7</li>
  <li>8</li>
  <li>9</li>
  <li>10</li>
  <li>11</li>
  <li>12</li>
</ul>

при наличии 12 <li> тегов, страница отображается следующим образом:

при наличииЕсли теги 11 <li>, страница станет такой, как показано ниже:

, однако, я ищу следующий результат:

Итак, как я могу изменить CSS для достижения этого эффекта вместо использования JS?

Answer 1

Чтобы добиться этого, вы должны установить свойство justyfy-content flex-start, чтобы вы могли выстроить все элементы в ряд.И чтобы создать эффект пространства вокруг, вы должны установить margin самостоятельно.В px или % процентах или vw ширине области просмотра.

* {
  padding: 0;
  margin: 0;
}

ul {
  display: flex;
  justify-content: flex-start;
  flex-wrap: wrap;
  align-items: flex-start;
}

li {
  background-color: green;
  flex-basis: 31%;
  min-height: 100px;
  margin: 5px;
}

Answer 2

Вместо justify-content:space-between вы должны использовать flex-start, чтобы выровнять их по левому краю

Затем я добавил интервал вручную (комментарии в коде к тому, что я изменил ниже)

* {
  padding: 0;
  margin: 0;
}

ul {
  display: flex;
  justify-content: flex-start;        /* change this */
  flex-wrap: wrap;
  align-items: flex-start;
}

li {
  background-color: green;
  flex-basis: 31%;
  min-height: 100px;
  margin-left:2%;               /* add this */
  margin-bottom:2%;             /* optional */
}
li:nth-child(3n+1) {            /* this stops the first item on every row having left margin  */
  margin-left:0;
}

<ul>
  <li>1</li>
  <li>2</li>
  <li>3</li>
  <li>4</li>
  <li>5</li>
  <li>6</li>
  <li>7</li>
  <li>8</li>
  <li>9</li>
  <li>10</li>
  <li>11</li>
</ul>