三栏布局

移动端的一个小需求：

就是这么一个三列的布局，可是与咱们常常讨论的圣杯布局或者说双飞翼布局还略有不一样，不一样点在于第三块区域，咱们这个需求里面宽度是变更的，完整描述一下：

三块区域，总体宽度须要自适应，区块必定宽、区块二是随着总体宽度的变化而变化、区块三有两三种不一样宽度的可能性。

因为是早期、并不是本人接手的项目，最近发现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{
            width: 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布局的特性。

　　这么作完美解决了需求问题，并且是任何一区块均可以任意变更。