关于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等分啦