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

尝试添加

justify-content: center

或

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

到您的ul

没有接触其他所有弹性物品就无法实现

Answer 2

您需要使容器的高度为100％，为简便起见，我在这里使用100vh。

您的flex元素也需要具有100％的高度，并且由于flex-direction是row，因此您应该使用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>

调整屏幕上居中弹性列表项目的大小

2 个答案: