移動端-彈性盒子

標籤：動畫效果   relative   pre   play   bug   span   nbsp   效果   display   

1.

    /*父級*/    display: box;    display: -moz-box;    display: -webkit-box;    box-orient: horizontal;    -moz-box-orient: horizontal;    -webkit-box-orient: horizontal;/*horizontal表橫向，vertical表垂直*/    /*子級*/     width:0;    box-sizing: border-box;    box-flex: 1;    -moz-box-flex: 1;    -webkit-box-flex: 1;    position: relative;

第1種子級寬度設定為0，解決子級寬度分配出現不等的bug

2.

      /*父級*/    display: -webkit-flex;    display: -moz-flex;    display: -ms-flex;    display: flex;    /*子級*/     -webkit-flex: 1;    -moz-flex: 1;    -ms-flex: 1;    flex: 1;

 第2種可以調整子級分配比例，實現動畫效果。

移動端-彈性盒子