html - 在屏幕调整大小时居中 flex 列表项

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>

标签： htmlcssflexbox

Answer 1

Try to add

justify-content: center

Or

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

to your ul

There is no way to achieve it without touching to all the other flex items