示例1.JPG
示例2.JPG
现在我们需要做出上图的效果，两边的div贴边，中间的两个div居中，而且它们是同级的，不能把中间两个套起来（比如li），如何实现呢？在这里可以通过弹性盒子实现。
基本布局：
*{
margin:0;padding:0;list-style: none;
}
ul{
display:flex;
}
li{
width:100px;
height:100px;
background: pink;
}
<ul>
<li>01</li>
<li>02</li>
<li>03</li>
<li>04</li>
</ul>
解决方法：
<ul>
<li>01</li>
<li style="margin-left:auto">02</li>
<li style="margin-right:auto">03</li>
<li>04</li>
</ul>
只需要把中间的两个加上margin-left：auto 和 margin-right：auto即可完成需求，如果中间有多个div，或者两边有多个div，也是同样的处理方法：
示例：
1. 中间多个
<ul>
<li>01</li>
<li style="margin-left:auto">02</li>
<li>05</li>
<li>06</li>
<li style="margin-right:auto">03</li>
<li>04</li>
</ul>
2. 两边多个
<ul>
<li>01</li>
<li>05</li>
<li>07</li>
<li style="margin-left:auto">02</li>
<li style="margin-right:auto">03</li>
<li>06</li>
<li>04</li>
</ul>
