【css】首尾div贴两边，中间多个div居中

示例1.JPG

示例2.JPG

现在我们需要做出上图的效果，两边的div贴边，中间的两个div居中，而且它们是同级的，不能把中间两个套起来（比如li），如何实现呢？在这里可以通过弹性盒子实现。

基本布局：

        *{
            margin:0;padding:0;list-style: none;
        }
        ul{
            display:flex;
        }
        li{
            width:100px;
            height:100px;
            background: pink;
        }

    

        
01
        
02
        
03
        
04
    

解决方法：

    

        
01
        
02
        
03
        
04
    

只需要把中间的两个加上margin-left：auto 和 margin-right：auto即可完成需求，如果中间有多个div，或者两边有多个div，也是同样的处理方法：

示例：

1. 中间多个

    

        
01
        
02
        
05
        
06
        
03
        
04
    

2. 两边多个

    

        
01
        
05
        
07
        
02
        
03
        
06
        
04