移动端的一个小需求：
就是这么一个三列的布局，但是与我们经常讨论的圣杯布局或者说双飞翼布局还略有不同，不同点在于第三块区域，我们这个需求里面宽度是变动的，完整描述一下：
三块区域，整体宽度需要自适应，区块一定宽、区块二是随着整体宽度的变化而变化、区块三有两三种不同宽度的可能性。
由于是早期、并非本人接手的项目，最近发现bug，修改到这里的时候，才发现问题所在。
因为这是一个列表，存在多个相同的布局，所以之前同事的布局是这样的：
<ul class="list">
<li>
<div class="icon-l"></div>
三星今日公布Note7爆炸原因 或带来“重生”？
<span>2017-01-23</span>
</li>
</ul>
设置样式.icon-l左浮动，span右浮动，然后让文字以类似于设置文字绕排的方式，区块二的文字通过js截取字符串，保持在一行显示。
总感觉这种解决方案并不是很好，一个是区块三没办法任意更改宽度，第二就是区块二的文字问题，本来css可以实现的，却选择了js来实现。
所以自己考虑了一个方案：
html布局如下：
<ul class="list">
<li>
<img class="icon" src="../images/1.jpg" alt="">
<h2>三星今日公布Note7爆炸原因 或带来“重生”？</h2>
<span>2017-01-23</span>
</li>
</ul>
单看布局，并没有太大变化，主要变化在于之前完全暴露在li内部的文字，我用h2标签包裹起来了。
css属性设置如下：
.icon{
1.2rem;
height: 0.8rem;
object-fit: cover;
}
.list li{
display: -webkit-flex;
}
.list h2{
font-size: 0.28rem;
flex: 1;
white-space: nowrap;
text-overflow: ellipsis;
overflow: hidden;
padding:0 0.2rem;
}
.list li span{
font-size: 0.2rem;
line-height: 2;
background: #f1f1f1;
}
再回头看下，并没有什么特殊的属性，以及难以理解的用法。前提是了解flex布局的特性。
这么做完美解决了需求问题，而且是任何一区块都可以任意变动。