Responsive flow layout

The telescopic box is new - The roulette
  1.display：flex Open the flow layout   
  2.flex-grow   Expansion ratio Distribute by number of copies , The default is 0
  3.flex-shrink Shrinkage ratio The default is 1
  4.flex-basis   Expansion reference value Expandable and contractible , By number of copies and pixels   The default is 1
  5.flex-flow   arrangement
  （1）flex-diection Location
    row Left to right layout      row-reverse Right to left layout  
    column Top to bottom layout   column-reverse Bottom to top layout
  （2）flex-wrap Do you want to change lines
    nowwrap Don't wrap       wrap Overflow wrap      wrap-reverse Reverse wrap
  6.order Set the order
    Company ： Numbers , The default is 1, The bigger the number, the higher it goes
  7.align-content Alignment of stacked telescopic rows
    flex-start   Top alignment   flex-end Bottom alignment     center In the middle
    space-around Average distribution   stretch   Full of parent classes
  8.align-items On side shaft （ The vertical axis ） Alignment in the direction
    flex-start   Top alignment   flex-end Bottom alignment     center In the middle
    baseline       The baseline     stretch   Full of parent classes
  9.align-self On side shaft （ The vertical axis ） Alignment in the direction
    flex-start   Top alignment   flex-end Bottom alignment     center In the middle
    baseline       The baseline     stretch   Full of parent classes     auto The adaptive
 10.justify-content Set or retrieve the elastic box element on the spindle （ The horizontal axis ） Alignment in the direction
    flex-start   Top alignment   flex-end Bottom alignment     center In the middle
    space-around Average distribution   space-between full-justified
    Note the difference between the two horizontal and vertical axes ：
                 7.8 The horizontal axis and vertical axis refer to the parent class , Support horizontal and vertical center of newline
                 9.10 Horizontal axis and vertical axis refer to parent and brother , Horizontal and vertical center of newline is not supported
The default value of flow layout
       flex:1;     It means flex:1 1 0%;   [ Extension 1 Receive as 1 The reference value is 0]
       flex:none; It means flex:0 0 auto; [ Neither stretch nor shrink Adapt to the parent class according to the original width and height ]
       flex:auto; It means flex:1 1 auto; [ Extension 1 Receive as 1 The benchmark value adapts to the parent class according to the original width and height ]
       flex:10%;   It means flex:1 1 10%;  [ Extension 1 Receive as 1 At baseline ： The excess area is calculated as 10% Retract ; Smaller than the area of the parent class, press 10% stretch ]