自适应网页中li模块如何等距分布-网站建设知识

以前，在没有自适应的情况下，我们布局一个网页，只需要算出网页总的宽度，然后根据li标签自身的宽度，再加上margin边距，然后均分即可，这样可以保证在同一分辨率下各个li标签等距离。
 
但是随着自适应网页的发展，分辨率就不是固定的了，而是网页要适配不同设备的大小，同时还要兼顾各个li自身等距离分布以及在整个网页中居中分布，这个时候就要用到一个新的css布局方式了，那就是justify-content，这个justify-content能够比较好的适配《自适应网页》，能够把标签按照横向或者纵向对齐，可以选择头部、尾部、居中、以及分散对齐，比如这次，我们想居中对齐，那么就是justify-content: center，如果是分散对齐，那就是justify-content: space-around，注意，这里的display要是flex，表示弹性布局方式，详细代码和效果如下：
    display: -webkit-flex;
    justify-content: center;
    -webkit-justify-content: center;
   width: 100%;

从上图可以看到，所有的li标签能够自动等距分布且居中对齐，上面代码中的-webkit是为了兼容不同内核浏览器而设置的，这里是为了兼容chrome、safari内核浏览器。
 
以上就是在自适应网页布局中常用的等距分布的布局方法。


PS：本文来自万书涛的个人博客，感谢分享。