flex实现div/li等水平居中布局

flex大家在开发的时候应该用到过，实现块级元素水平居中布局的方法挺多，本文讲一下不用浮动，用flex实现div水平布局，效果图：

为了方便，本文使用li举例，div同理。代码如下：

/*css*/
 .ulBox{
     display: flex;
     justify-content: center;
     width: 100%;padding: 20px;border: 1px solid #f60;
 }

<!--html-->
    <ul class="ulBox">
        <li class="lis">li---111111</li>
        <li class="lis">li---222222</li>
        <li class="lis">li---333333</li>
    </ul>

下面是划重点：注意样式是加在父级元素的！

实现这个并不难，接下来是小拓展：

justify-content：该属性定义了项目在主轴上的对齐方式。其可取值及其意义：

flex-start（默认值）：左对齐
flex-end：右对齐
center： 居中
space-between：两端对齐，项目之间的间隔都相等。
space-around：每个项目两侧的间隔相等（注意：此时项目之间的间隔比项目与边框的间隔大一倍）。

为了兼容不同浏览器，可在flex前加浏览器前缀，如：display: -webkit-flex;

最后，希望本文对你有所帮助。

个人微信公众号：小禾子的魔法盒子，欢迎关注！