Question

我有一个像这样的简单flexbox列表...

ul {
  display:flex;
  
}

li {
  background:red;
  padding:10px;
  margin:10px;
  list-style:none;
}

<ul>
  <li>List Item 1</li>
  <li>List Item 2</li>
  <li>List Item 3</li>
  <li>List Item 4</li>
  <li>List Item 5</li>
</ul>

如果没有足够的空间可以水平显示列表，那么我希望垂直显示。

在没有足够空间的情况下，flexbox中是否有办法告诉它垂直显示而不是换行？

Answer 1

我建议您将媒体查询与弹性方向属性一起使用。

通过媒体查询更改ul标签的弯曲方向

ul {
   display: flex;
   @media (max-width: <Xpx>){
     flex-direction: column
   }
}

Xpx-您要垂直堆叠的位置。

Answer 2

使用此技巧

ul li:nth-last-child(n+6):first-child,
ul li:nth-last-child(n+6):first-child ~ *{
  // set new style in case you have 5 li or more
}

工作代码

ul {
    display: flex;
    flex-wrap: wrap;
}

li {
  background:red;
  padding:10px;
  margin:10px;
  list-style:none;
  }
ul li:nth-last-child(n+6):first-child,
ul li:nth-last-child(n+6):first-child ~ *{
    flex: 1 1 100%;
}

<ul>
  <li>List Item 1</li>
  <li>List Item 2</li>
  <li>List Item 3</li>
  <li>List Item 4</li>
  <li>List Item 5</li>
  <li>List Item 4</li>
  <li>List Item 5</li>
  <li>List Item 4</li>
  <li>List Item 5</li>
</ul>

<h1>Same style with 5 items or less</h1>
<ul>
  <li>List Item 1</li>
  <li>List Item 2</li>
  <li>List Item 3</li>
  <li>List Item 4</li>
  <li>List Item 5</li>
</ul>

Answer 3

使用媒体查询以不同的宽度设置不同的属性，并在https://flexboxfroggy.com/玩游戏来掌握flexbox。

要生成针对特定屏幕分辨率的媒体查询，请访问

http://giona.net/tools/css3-mediaquery-generator/

希望这会有所帮助

Flexbox-垂直显示列表，而不是自动换行

3 个答案: