等比例等间距布局实例

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

代码

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速成班》