Li тег с разными рядами (строками)

Question

У меня есть несколько элементов li, но я хочу следовать формату следующих li для каждой строки (с выравниванием по центру):

3
4
3
3
3 и т.д.

Я ранее пытался настраивать это во флексбоксе, но не мог понять, как это сделать.
Поэтому я использовал display: inline-block.

.meet-team li {
  list-style-type: none;
  width: 20%;
  padding: 20px 15px;
  box-sizing: border-box;
  text-align: center;
  display: inline-block;
}

.meet-team li:nth-of-type(4),
.meet-team li:nth-of-type(9) {
  clear: left;
}

<ul class="meet-team">
  <li>Stuff</li>
  <li>Stuff</li>
  <li>Stuff</li>
  <li>Stuff</li>
  <li>Stuff</li>
  <li>Stuff</li>
  <li>Stuff</li>
  <li>Stuff</li>
  <li>Stuff</li>
  <li>Stuff</li>
  <li>Stuff</li>
  <li>Stuff</li>
</ul>

_{Свободный перевод вопроса Li tag with different rows от участника @Brad.}

Answer 1

Вы можете попробовать flexbox и просто использовать другую гибкую основу - flex-basis: 25%; (или ширину) для второй строки:

ul {
 display:flex;
 flex-wrap:wrap;
 margin:0;
 padding:0;
}

.meet-team li {
  list-style-type: none;
  flex-basis: 33%;
  padding: 20px 15px;
  box-sizing: border-box;
  text-align:center;
}

.meet-team li:nth-of-type(4),
.meet-team li:nth-of-type(5),
.meet-team li:nth-of-type(6),
.meet-team li:nth-of-type(7) {
  flex-basis: 25%;
}

<ul class="meet-team">
  <li>Stuff</li>
  <li>Stuff</li>
  <li>Stuff</li>
  <li>Stuff</li>
  <li>Stuff</li>
  <li>Stuff</li>
  <li>Stuff</li>
  <li>Stuff</li>
  <li>Stuff</li>
  <li>Stuff</li>
  <li>Stuff</li>
  <li>Stuff</li>
  <li>Stuff</li>
</ul>

_{Свободный перевод ответа от участника @Temani Afif.}

БЛОГ НА HUSL

Li тег с разными рядами (строками)

Ответы (1 шт):