Mobile-Elastic Box

1.

    /* Parent Level */     Display:box;    Display:-moz-box;    Display:-webkit-box;    Box-orient:horizontal;    -moz-box-orient:horizontal;    -webkit-box-orient:horizontal; /* horizontal table transverse, vertical table vertical */    /* sub-level */      width:0;    Box-sizing:border-box;    box-flex:1;    -moz-box-flex:1;    -webkit-box-flex:1;    position:relative;

The 1th seed-level width is set to 0, resolving unequal child-width assignments

2.

      /* Parent Level */     display:-webkit-flex;    Display:-moz-flex;    Display:-ms-flex;    Display:flex;     /* sub-level */      -webkit-flex:1;    -moz-flex:1;    -ms-flex:1;    flex:1;

The 2nd can adjust the child allocation scale to achieve animation effect.

Mobile-Elastic Box