CSS技巧（六）：display:box

 1、display:box

 

旧语法：

.flex-ul{display: -webkit-box; display: box;}
.flex-ul li{-webkit-box-flex:1; box-flex:1;}

 

新语法：·

.flex-ul{display:-webkit-flex; display: flex; width: 100%;}
.flex-ul li{-webkit-flex:1; flex:1;}

 

2、平分子布局 box-flex:1,2,3.....

CSS 

ul{
        display: -webkit-box;
        display: box;
        width: 600px;
        margin: 0;
        padding: 0;
        border: 1px solid blue;
      }

 

 

.li1{
       box-flex: 2;
       -webkit-box-flex: 2;
      }
      .li2{
        box-flex: 1;
        -webkit-box-flex: 1;
      }
      .li3{
        box-flex: 3;
        -webkit-box-flex: 3;
      }

 

 

HTML

<ul>
      <li class="li1">分类1</li>
      <li class="li2">分类2</li>
      <li class="li3">分类3</li>
    </ul>