Flex布局：實現左右兩列自伸縮撐滿效果的

目前測試支持的瀏覽器：

兼容IE10及以上、Chrom、Firefox瀏覽器。

假如考慮IE10以下瀏覽器，可以考慮其他寫法。

話不多說，上代碼：

 

    <div style="background: green; display: flex;">
        <div style="flex-basis: auto; white-space: nowrap; background: #f00; ">我在左邊。我很長很長很長很長很長長很長很長很長很長很長很長</div>
        <div style="width: 100%; background: #0f0;">我在右邊很短</div>
    </div>

　　

效果如下：

再來個反例代碼：

    <div style="background: #00f; display: flex;">
        <div style="flex-basis: auto; white-space: nowrap; background: #f00; ">我在左邊很短</div>
        <div style="width: 100%; background: #0f0;">我在右邊邊。我很長很長很長很長很長長很長很長很長很長很長很長</div>
    </div>

　　

效果如下：

 

 

相信大家也一目了然了。

左側內容多的話，會自動撐開左側的div。

同時右邊的div還可以自適應剩余的寬度（外層div寬度 - 左側div寬度）。

再也不用去考慮傳統的盒子模型布局中的 display position float之類的了。