今天让这个属性坑的满地打滚,w3c 这样描述道:

IMAGE

但事实真的是这样的吗?看下图:

IMAGE

我们发现,除了左右比例根本不是说好的 1:2 之外,这个比例还会随着容器内容的多少而变化,我书读的比较少,顿时茫然了。

后来发现,再给他们各自设置 width: 0, 才会真正的按 1:2 分配宽度。既然这个属性有问题,我们为什么不用更好的 display: flex 呢?

这才是真正的坑啊,大部分安卓机(尤其小米),根本不认识 display: flex 是什么,甭管你加了什么样的前缀…好在他们还能认识加了前缀的 display: box, 再配上 width: 0, 这个问题就完美解决了。

砖头:

//mixin
.flex(){
    display: -webkit-box;
    display: -moz-box;
    display: -ms-box;
    display: -o-box;
    display: box;
    display: -webkit-flex;
    display: -moz-flex;
    display: -ms-flex;
    display: -o-flex;
    display: flex;
.flex-children(@value: 1){
    -webkit-box-flex: @value;
    -moz-box-flex: @value;
    -ms-box-flex: @value;
    -o-box-flex: @value;
    box-flex: @value;
    -webkit-flex: @value;
    -moz-flex: @value;
    -ms-flex: @value;
    -o-flex: @value;
    flex: @value;
    width: 0;
}
//使用
ul{
    .flex();
    li{
        .flex-children(1);
    }
    li.double{
        .flex-children(2);
    }
}