等比例等間距佈局實例

這是一個很經常使用的佈局，這裏給出一種實現方案

代碼

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