01-CSS3-justify-content: space-around; justify-content: space-between;

/* justify-content: space-around;
运用在父级元素上
第一个子元素距离左边的距离==最后一个子元素距离右边的距离
除第一个子元素和最后一个子元素外,第2个,第3个...一直到倒数第二个子元素,这些子元素距离左右两边的间距都是相等
巧记:around 是四周,说明四周是有间距的。
*/

 

/* justify-content: space-between;
运用在父级元素上
第一个子元素和最后一个子元素 分别靠在最左和最右
除第一个子元素和最后一个子元素外,第3个...一直到倒数第二个子元素,这些子元素距离左右两边的间距都是相等
*/

 

 

<style>
            *{
                padding: 0;
                margin: 0;
                
            }
            ul{ 
                list-style: none;
                width:100%;
                background: orchid;
            }
            ul{
                display: flex;
                justify-content: space-around;
            }
            ul>li{
                width: 180px;
                height: 100px;
                background: pink;
            }
     
        </style>
    </head>
    <body>
        <ul>
            <li>111</li>
            <li>222</li>
            <li>333</li>
        </ul>
    </body>
</html>

 

justify-content: space-between;如下

 

 

 

 

相关文章

HTML5和CSS3实现3D展示商品信息的代码
利用HTML5中的Canvas绘制笑脸的代码
Html5剪切板功能的实现
如何通过HTML5触摸事件实现移动端简易进度条
Html5移动端获奖无缝滚动动画实现
关于HTML5和CSS3实现机器猫的代码