如何用flex布局解决如图所示的问题?

Question

现在有以下的html结构, li标签数量未知且可变, 需要使用对ul标签display: flex进行布局, 页面效果如图所示.
效果描述:
图1. 当li标签不够的时候, 该如何处理?
图2. 当li标签的距离大于li标签的宽度, 该如何处理?

<ul>
    <li></li>
    ...
    <li></li>
<ul>

Answer 1

这个你可以参考阮一峰老师的flex布局

其实在这里我并不清楚你要表达什么：

1. li标签不够，这个是可变的，这个不可控，他有几个就显示几个，比如说一行你想要三个你可以设置li的大小呀，然后多余的li标签换行显示。

ul {
  display: flex;
  flex-wrap: wrap; //换行
}

2.我觉得你的意思是间距太大不好看。这些都是你自己可以设置的呀，比如说设置第一个的margin-left和第三个的margin-right.自己调整布局。然后通过能：nth:child()设置1，4，7.。。的margin-left,和3，6，9的margin-right

Answer 2

flex 参考 https://segmentfault.com/a/11...

用 space-between

li 不够的情况下，补足个数
补上的 li 用特别的 class 隐藏显示 opacity:0 或者 visibility:hidden