等比例等间距布局实例

这是一个很经常使用的布局，这里给出一种实现方案

代码

html

<div>
    <p id="p1">Hello</p>
    <p id="p2">W3School</p>
    <p id="p2">W3School</p>
</div>

css

div {
    display:flex;
    width:100%;
    border:1px solid black;
}

p {
    flex:1;
    margin-right:15px;
    border:1px solid red;
}

p:first-child {
    margin-left:15px;
}

实现效果

解析

1. 子元素等分排满屏幕宽度，父元素设置display:flex;

2. 子元素设置flex:1，意思是宽度自动填满剩余空间，若是有多个并列子元素，会按照数值等比分配空间；

3. 子元素间隔相等，全部子元素设置margin-right:15px，第一个子元素使用伪类(first-child)设置margin-left:15px;

这样子就能够实现等宽等间距布局，若是不想等宽，能够设置不一样的flex实现按比例分配；

兼容问题

flex存在不少兼容性问题，还须要设置如下属性，能够兼容Android4.0+、iOS7.0+

div {
    display: -webkit-box;
    display: -webkit-flex;
    display: flex;
}

p {
    -webkit-box-flex: 1;
    -webkit-flex: 1;
    flex: 1;
}

更多flex兼容性问题，参考腾讯ISUX文章《移动端全兼容的flexbox速成班》