h5css3 elastic box

Elastic boxes: 
    Old: display: box; 

    New: display: flex; 

    direction: flex-direction: 
        lateral positive direction row / transverse row-reverse / longitudinal forward direction reverse direction column / longitudinal direction opposite column-reverse; 

    lateral alignment: justify -content 
        left: flex-start / right alignment: flex-end / center alignment: center 
        justification: space-between / equidistantly aligned: space-around 

    vertical alignment: align-items 
        on the alignment: flex-start / lower align: flex-end / center alignment: center 
        contour (like the height of the parent): stretch / align the baseline (aligned in its lower side): baseline 

    (note: can not write the write align-items align-content) 

    longitudinal subelements alignment (line number> 1): align-content 
        on the alignment: flex-start / bottom alignment: flex-end / center alignment: center 
        justification: space-between / equidistantly aligned: space-around 

    if the sub-element wrap: flex-wrap 
        wrapping: wrap / no wrap: nowrap 

    direction with wrap Abbreviation:
        flex-flow: direction (flex-direction) / line feed (flex-wrap) 

three attributes on sub-elements: 
        expansion space: flex-grow (wrote a total number, and the remaining space division) 

        compression space: flex-shrink 
        1 = width parts (total width of sub-elements - the container width) / total parts (each representing one element, flex-shrink: 3 + 2 ) 
        space the compressed sub-element width = - 1 * width corresponding parts 

        width: flex-basis (priority than width, style overrides width) 

    Abbreviation: 
        Flex: Flex-Grow headroom flex-shrink flex-basis compression space width (note that the order must be) 

        sequence: order 
                smaller values against before, bigger and more rely on the 

        individual style: align-self