Flex布局：实现左右两列自伸缩撑满效果的

目前测试支持的浏览器：

兼容IE10及以上、Chrom、Firefox浏览器。

假如考虑IE10以下浏览器，可以考虑其他写法。

话不多说，上代码：

 

?

1 2 3 4

<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>

　　

效果如下：

再来个反例代码：

?

1 2 3 4

<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之类的了。