box-flex实现三等分布局

前言：

   我还是个前端的菜鸟，现在在实习，接触到一些移动web的开发任务，遇到了很多问题，记录一下顺便分享给大家。

问题？

   要实现下图的三等分屏幕效果。此页面为手机web页面，要求自适应宽度。

 

 

 

探索：

  期初是用的width：33.33%，但是这样很容易出错，因为margin，border和padding不计算在盒子的width中，所以33.33%显然达不到效果，会应为有margin和padding的参合整体的宽度超过了，实际的width：100%；

   

解决：

     （1）css3 box-sizing属性就是控制盒子的宽度计算包括margin ，border，padding

          box-sizing:border-box; /*border计算在width中*/

          -moz-box-sizing:border-box; /* Firefox */

          -webkit-box-sizing:border-box; /* Safari */

 

     （2）使用css3 calc();

        width: calc((100% - （margin + padding ）* 3 * 2) / 3 );   
    width: -webkit-calc((100% - （margin + padding ）* 3 * 2) / 3 ); 
    width: -moz-calc((100% - （margin + padding ）* 3 * 2) / 3 ); 

    

     (3) CSS3 box-flex 属性

         重点来了，这个新特性可能使用的比较少，但感觉很好用所以推荐一下哈。

 

        css3引入了新的盒模型——弹性盒模型，该模型决定一个盒子在其他盒子中的分布方式以及如何处理可用的空间

<div class="nav">

  <div class="nav-li">成就</div>

  <div class="nav-li">动态</div>

  <div class="nav-li">收藏</div>

</div>

Css:

   .nav{

 

 display:inline-block;

    /* Firefox */

    display:-moz-box;

    -moz-box-orient:horizontal;

    /* Safari, Opera, and Chrome */

    display:-webkit-box;

    -webkit-box-orient:horizontal;

    /* W3C */

    display:box;

    box-orient:horizontal;

}

.nav-li{

height: 40px;

line-height: 40px;

-webkit-box-flex: 1.0;

-moz-box-flex:1.0;

 box-flex:1.0;

}

就是这样，按照上面写就可以达到自动均分了啦啦啦。这样写的好处就是，你不管添加几个内容《div》都会是均分的。