三欄佈局

移動端的一個小需求：

就是這麼一個三列的佈局，可是與咱們常常討論的聖盃佈局或者說雙飛翼佈局還略有不一樣，不一樣點在於第三塊區域，咱們這個需求裏面寬度是變更的，完整描述一下：

三塊區域，總體寬度須要自適應，區塊必定寬、區塊二是隨着總體寬度的變化而變化、區塊三有兩三種不一樣寬度的可能性。

因爲是早期、並不是本人接手的項目，最近發現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佈局的特性。

　　這麼作完美解決了需求問題，並且是任何一區塊均可以任意變更。