flex

A guide to flex

这已经是一篇非常全面且简洁的文章了，C端在实际应用过程中有几个经典例子，结合兼容性，我们讨论出最优的解决方案。

• 每行最多4个元素，小于4个时宽度不变，大于等于4个自动分配大小code

.parent {
    /*兼容android4.4-不支持flex，支持flexbox*/
    display: -webkit-box;  
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
}
.child {
    width: 25%;
    height: 100px;
}

• 单行平均分配code

.child {
    flex: 1; //没有兼容性问题
}

• 6个元素，2行排列，涉及到折行的都有兼容性问题，android4.4-不支持，需要和PM，QA同学确认支持版本，讨论应对方案code

//browser prefixer 参考例一
.parent {
    display: flex;
    flex-wrap: wrap;  /*android 4.4以下不支持，无法折行*/
    justify-content: space-around;
}
.child {
    width: 33%;
    height: 100px;
}

参考：

advanced-cross-browser-flexbox