关于box-flex实现自适应页面内容均分

发布时间：2020-12-15 03:47:46 所属栏目：百科来源：网络整理

导读：先献出代码： 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: -w

先献出代码：

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

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!