弹性盒子布局

　　弹性盒子布局是一种非常好用的布局方式，解决了百分百比和px的共存问题， 当我们在宽度上给百分百时 有需要在border上给宽度，但是单位又时px，

这样就很麻烦了，而弹性盒子就很好的解决了这个问题；

      首先在父级盒子上添加  display:flex;  将盒子变成弹性盒子。

     下面时一个 色子布局  的小demo;

      *css 代码比较长可以做到简洁，但是这个程序猿比较懒；

.box{
        float: left;
        margin-left:30px;
        margin-top:30px ; 
        width: 63px;
        height: 63px;
        background: #e7e7e7;
        display: flex;/*将最外层容器变成弹性盒子*/
        justify-content: center;/*让内容居中两端留有空间*/
        border-radius: 8px;
        align-items:center;/*让内容上下居中两端留空*/
        box-shadow:inset 0 -3px 0 #bbb,inset 0 3px 0 #eee,inset 3px 0 0 #d7d7d7,inset -3px 0 0 #d7d7d7;
       }
       .item{
        width: 12px;
        height:12px;
        background: #000;
        border-radius: 50%;
       }
       .box1{
        float: left;
        margin-left:30px;
        margin-top:30px ;
        width: 63px;
        height: 63px;
        background: #e7e7e7;
        display: flex;
        justify-content: space-around;/*让子级彼此之间由空间两边成环绕分布*/
        border-radius: 8px;
        flex-direction: column;/*调整div的轴方向，成横向或竖向*/
        align-items:center;
        box-shadow:inset 0 -3px 0 #bbb,inset 0 3px 0 #eee,inset 3px 0 0 #d7d7d7,inset -3px 0 0 #d7d7d7;
       }
       .item1{
        width: 12px;
        height:12px;
        background: #000;
        border-radius: 50%;
       }
       .item11{
        width: 12px;
        height:12px;
        background: #000;
        border-radius: 50%;
       }
        .box2{
        float: left;
        margin-left:30px;
        margin-top:30px ;
        width: 63px;
        height: 63px;
        background: #e7e7e7;
        display: flex;       
        border-radius: 8px;     
        box-shadow:inset 0 -3px 0 #bbb,inset 0 3px 0 #eee,inset 3px 0 0 #d7d7d7,inset -3px 0 0 #d7d7d7;
        justify-content: space-around;
       }
       .box21{ 
        margin-top: 7px;
        height: 50px;
        background: #e7e7e7;
        display: flex;   

       }
       .item2{   
        width: 12px;
        height:12px;
        background: #000;
        border-radius: 50%;
         
       }
       .box22{ 
        margin-top: 7px;
        height: 50px;
        background: #e7e7e7;
        display: flex;  
        align-items:center;                    
       }
       .item21{
        width: 12px;
        height:12px;
        background: #000;
        border-radius: 50%;
       }
       .box23{ 
        margin-top: 7px;
        height: 50px;
        background: #e7e7e7;
        display: flex;  
        align-items:flex-end;                    
       }
       .item22{
        width: 12px;
        height:12px;
        background: #000;
        border-radius: 50%;
       }


       .box3{
        float: left;
        margin-left:30px;
        margin-top:30px ;
        width: 63px;
        height: 63px;
        background: #e7e7e7;
        display: flex;       
        border-radius: 8px;     
        box-shadow:inset 0 -3px 0 #bbb,inset 0 3px 0 #eee,inset 3px 0 0 #d7d7d7,inset -3px 0 0 #d7d7d7;
        justify-content: space-around;

       }
       .box31{ 
        margin-top: 7px;
        height: 50px;
        background: #e7e7e7;
        display: flex;  
        justify-content: space-between;
        flex-direction: column;    

       }
       .item3{   
        width: 12px;
        height:12px;
        background: #000;
        border-radius: 50%;
         
       }
       .item31{   
        width: 12px;
        height:12px;
        background: #000;
        border-radius: 50%;
         
       }
       .box32{ 
        margin-top: 7px;
        height: 50px;
        background: #e7e7e7;
        display: flex;  
        justify-content: space-between;
         flex-direction: column;                 
       }
       .item32{
        width: 12px;
        height:12px;
        background: #000;
        border-radius: 50%;
       }
        .item33{
        width: 12px;
        height:12px;
        background: #000;
        border-radius: 50%;
       }


       .box4{
        float: left;
        margin-left:30px;
        margin-top:30px ;
        width: 63px;
        height: 63px;
        background: #e7e7e7;
        display: flex;       
        border-radius: 8px;     
        box-shadow:inset 0 -3px 0 #bbb,inset 0 3px 0 #eee,inset 3px 0 0 #d7d7d7,inset -3px 0 0 #d7d7d7;
        justify-content: space-around;

       }
       .box41{ 
        margin-top: 7px;
        height: 50px;
        background: #e7e7e7;
        display: flex;  
        justify-content: space-between;
        flex-direction: column;    

       }
       .item4{   
        width: 12px;
        height:12px;
        background: #000;
        border-radius: 50%;
         
       }
       .item41{   
        width: 12px;
        height:12px;
        background: #000;
        border-radius: 50%;
         
       }
       .box42{ 
        margin-top: 7px;
        height: 50px;
        background: #e7e7e7;
        display: flex;  
        justify-content:center;
        flex-direction: column;                 
       }
       .item42{
        width: 12px;
        height:12px;
        background: #000;
        border-radius: 50%;
        
       }
        .item43{
        width: 12px;
        height:12px;
        background: #000;
        border-radius: 50%;
       }
       .box43{ 
        margin-top: 7px;
        height: 50px;
        background: #e7e7e7;
        display: flex;  
        justify-content: space-between;
         flex-direction: column;                 
       }
       .item43{
        width: 12px;
        height:12px;
        background: #000;
        border-radius: 50%;
       }
        .item44{
        width: 12px;
        height:12px;
        background: #000;
        border-radius: 50%;
       }

       .box5{
        float: left;
        margin-left:30px;
        margin-top:30px ;
        width: 63px;
        height: 63px;
        background: #e7e7e7;
        display: flex;       
        border-radius: 8px;     
        box-shadow:inset 0 -3px 0 #bbb,inset 0 3px 0 #eee,inset 3px 0 0 #d7d7d7,inset -3px 0 0 #d7d7d7;
        justify-content: space-around;

       }
       .box51{ 
        margin-top: 7px;
        height: 50px;
        background: #e7e7e7;
        display: flex;  
        justify-content: space-between;
        flex-direction: column;    

       }
       .item5{   
        width: 12px;
        height:12px;
        background: #000;
        border-radius: 50%;
         
       }
       .item51{   
        width: 12px;
        height:12px;
        background: #000;
        border-radius: 50%;
         
       }
       .box52{ 
        margin-top: 7px;
        height: 50px;
        background: #e7e7e7;
        display: flex;  
        justify-content:center;
        flex-direction: column;                 
       }
       .item52{
        width: 12px;
        height:12px;
        background: #000;
        border-radius: 50%;
        
       }
        .item53{
        width: 12px;
        height:12px;
        background: #000;
        border-radius: 50%;
       }
       .box53{ 
        margin-top: 7px;
        height: 50px;
        background: #e7e7e7;
        display: flex;  
        justify-content: space-between;
         flex-direction: column;                 
       }
       .item53{
        width: 12px;
        height:12px;
        background: #000;
        border-radius: 50%;
       }
        .item54{
        width: 12px;
        height:12px;
        background: #000;
        border-radius: 50%;
       }
       .item55{
        width: 12px;
        height:12px;
        background: #000;
        border-radius: 50%;
       }

       .box6{
        float: left;
        margin-left:30px;
        margin-top:30px ;
        width: 63px;
        height: 63px;
        background: #e7e7e7;
        display: flex;       
        border-radius: 8px;     
        box-shadow:inset 0 -3px 0 #bbb,inset 0 3px 0 #eee,inset 3px 0 0 #d7d7d7,inset -3px 0 0 #d7d7d7;
        justify-content: space-around;

       }
       .box61{ 
        margin-top: 7px;
        height: 50px;
        background: #e7e7e7;
        display: flex;  
        justify-content: space-between;
        flex-direction: column;    

       }
       .item6{   
        width: 12px;
        height:12px;
        background: #000;
        border-radius: 50%;
         
       }
       .item61{   
        width: 12px;
        height:12px;
        background: #000;
        border-radius: 50%;
         
       }
       .item62{
        width: 12px;
        height:12px;
        background: #000;
        border-radius: 50%;
        
       }

       .box62{ 
        margin-top: 7px;
        height: 50px;
        background: #e7e7e7;
        display: flex;  
         justify-content: space-between;
        flex-direction: column;                
       }
       .item63{
        width: 12px;
        height:12px;
        background: #000;
        border-radius: 50%;
       } 
       .item64{
        width: 12px;
        height:12px;
        background: #000;
        border-radius: 50%;
       }
        .item65{
        width: 12px;
        height:12px;
        background: #000;
        border-radius: 50%;
       }
       .box63{ 
        margin-top: 7px;
        height: 50px;
        background: #e7e7e7;
        display: flex;  
        justify-content: space-between;
         flex-direction: column;                 
       }
      
       .item66{
        width: 12px;
        height:12px;
        background: #000;
        border-radius: 50%;
       }
       .item67{
        width: 12px;
        height:12px;
        background: #000;
        border-radius: 50%;
       }
       .item68{
        width: 12px;
        height:12px;
        background: #000;
        border-radius: 50%;
       }

   html 代码如下：

//html 代码  

<div class="box">
       <span class="item"></span>
     </div>
     <div class="box1">
       <span class="item1"></span>
       <span class="item11"></span>
     </div>
     <div class="box2">
       <div class = "box21">
          <span class="item2"></span>
       </div>
       <div class = "box22">
          <span class="item21"></span>
       </div>
       <div class = "box23">
          <span class="item22"></span>
        </div>
     </div>
     <div class="box3">
       <div class = "box31">
          <span class="item3"></span>
          <span class="item31"></span>         
       </div>
       <div class = "box32">
          <span class="item32"></span>
          <span class="item33"></span>
       </div>          
     </div>

     <div class="box4">
       <div class = "box41">
          <span class="item4"></span>
          <span class="item41"></span>         
       </div>
       <div class = "box42">
          <span class="item42"></span>
       </div>
       <div class = "box43">
          <span class="item43"></span>
          <span class="item44"></span>
       </div>
      </div> 

       <div class="box5">
         <div class = "box51">
            <span class="item5"></span>
            <span class="item51"></span> 
            <span class="item52"></span>        
         </div>
         <div class = "box53">
            <span class="item53"></span>
            <span class="item54"></span>
            <span class="item55"></span>
         </div>
       </div> 


       <div class="box6">
         <div class = "box61">
            <span class="item6"></span>
            <span class="item61"></span> 
            <span class="item62"></span>        
         </div>
         <div class = "box62">
            <span class="item63"></span>
            <span class="item64"></span> 
            <span class="item65"></span>        
         </div>
         <div class = "box63">
            <span class="item66"></span>
            <span class="item67"></span>
            <span class="item68"></span>
         </div>
       </div> 

 

   多看一下代码还是很简单的