Центрирование гибкого элемента списка при изменении размера экрана

Question

У меня есть список, в котором есть six li elements.По умолчанию все они отображаются в одном ряду.

При изменении размера экрана 540px, я хочу, чтобы последний элемент li (item 6) переместился в другую строку, но был выровнен по центру (поэтому ниже item 3).

Не знаю, чтоЯ делаю неправильно здесь:

.container {
  display: flex;
  justify-content: center;
}

ul {
  display: inline-block;
  list-style: none;
  margin: 0;
  padding: 0;
  line-height: 1em;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
}

ul li {
  margin-right: .5em;
  border: 1px solid #a2a4a5;
  padding: 15px;
}

@media (max-width: 540px) {
  ul li {
    border: 1px solid blue;
    align-items: center;
  }
}

<div class="container">
  <ul>
    <li>Text 1</li>
    <li>Text 2</li>
    <li>Text 3</li>
    <li>Text 4</li>
    <li>Text 5</li>
    <li>Text 6</li>
  </ul>
</div>

Answer 1

Вам нужен контейнер, чтобы иметь высоту 100%, здесь я использовал 100vh для простоты.

Ваш flex-элемент также должен иметь высоту 100%, и поскольку flex-direction является строкой,Вы должны использовать align-items: center для вертикального центрирования контента

.container {
  display: flex;
  height: 100vh;
  justify-content: center;
}

ul {
  display: inline-block;
  list-style: none;
  justify-content: center;
  align-items: center;
  margin: 0;
  padding: 0;
  line-height: 1em;
  display: flex;
  height: 100%;
  flex-direction: row;
  flex-wrap: wrap;
}

ul li {
  margin-right: .5em;
  border: 1px solid #a2a4a5;
  padding: 15px;
}

@media (max-width: 540px) {
  ul li {
    border: 1px solid blue;
    align-items: center;
  }
}

<div class="container">
  <ul>
    <li>Text 1</li>
    <li>Text 2</li>
    <li>Text 3</li>
    <li>Text 4</li>
    <li>Text 5</li>
    <li>Text 6</li>
  </ul>
</div>

Answer 2

Попробуйте добавить

justify-content: center

или

 justify-content: space-between //This will look close to what you actually have in responsive mode

к вашему ul

Невозможно достичь этого, не касаясь всех других гибких предметов