關於box-flex實現自適應頁面內容均分

先獻出代碼：

<div class="flex-box">
     <div style="background-color: #0ff">sssssssss</div>
     <div style="background-color: #0f0">ddddddddddddddddddddddddddddd</div>
     <div style="background-color: #f00">3</div>
 </div>
 <style type="text/css">
    .flex-box{
       display: -webkit-box;
       display: -moz-box;
       display: box;
       width: 60%;
       border:2px #000 solid;
     }
    .flex-box > div{
       height: 50px;
       width:1%;
       -webkit-box-flex:1 ;
       -moz-box-flex: 1;
       box-flex: 1;
       word-break: break-all;
    }
 </style>

這樣 頁面是屬於自適應的，同時你能夠將內容均分，效果圖以下：

以前在使用box-flex時的作法沒有加上width:1%，會出現這樣的問題:
內容字符相同時是均等的，以下圖：

當內容字符個數不相同時就會出現下面的狀況：

圖片的寬度再也不相同，可是咱們能夠細心的發現，雖然內容寬度不能等分了，可是每一個部分的空白處的寬度確實相同的。

對於想要自適應頁面的內容進行平均分配，很容易的也想到了width:%的作法，對於3等分，你們都知道會有不整除的問題，出現下圖的情況：

固然你也能夠很精確的將數值設置成33.3333%看起來貌似也沒有多大的縫隙，但是，當頁面爲6等分，7等分的時候呢？這個縫隙勢必會影響頁面的佈局的。
再回想到剛剛發現的box-flex的做用，是我想到了將二者放在一塊兒會出什麼效果，果真和預期的結果同樣，不管總寬度如何變化，內容字符是可能是少，都可以保證三等分配的效果，以下圖：

而此時貌似是33%仍是20%好像都沒有關係了，那爲了未來也許真會出現9等分配的情況吧，因此，把width設置爲1%貌似更安全些。
自適應頁面中7等分啦