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

Question

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

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

Answer 1

这个你可以参考阮一峰老师的flex布局其实在这里我并不清楚你要表达什么：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