示例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>