怪異ボックス&複数列レイアウト

  box-sizing:
       ：
        box-sizing:content-box;       
        box-sizing:border-box:        （IE   ）

     ：
           ：
        box-sizing:border-box;


           ：padding border           ，       。
    ：    。
      ：            ,    。
      ：
        a：                        。
        b:                       ，         margin:auto  
        c:               “  ”  
            "  ":    X      Y ，  X    ，Y     。
             ：     X    。

 ：      ：
    display:flex;

 ：       ：
    flex-direction:
           ：
            row     (   ：X    )
            column  (Y    )
            column-reverse    ( Y        )
            row-reverse    ( X        )

 ：         ：
    justify-content:
           ：
            flex-start       ：            
            flex-end              
            center            
            space-between        
            space-around           


 ：       :
    align-items:
        flex-start           
        flex-end             
        center               
        baseline        （flex-start  ）
        stretch（   ）     


 ：            （    ）    ：
    flex-wrap:
        wrap           
        nowrap          
        wrap-reverse       

 ：          ：
    align-content:
            flex-start       ：              
            flex-end              
            center            
            space-between        
            space-around           

 ：  ：flex-direction   flex-wrap  ：
    flex-flow:;

           ：

 ：                         。
    align-self:
        auto     。            align-items   。          "stretch"。
        Stretch		          。
        Center		         。
        flex-start		         。
        flex-end		         。


 ：          ：
    order:          。    。


 ：       ：
    flex:1;          。
flex:1;      。

        flex-grow:;          
        flex-shrink:;        
        flex-basis:;          

  ：flex-shrink:0;     。
     ：

    1：  ：
        column-count:;

    2:   ：
        column-gap:;

    3:    ：
        column-rule:

    4:              ：
        column-fill:;
            auto             
            balance                 

    5:  ：
        column-span:all;

    6:  
        column-width:  

    7:columns: 7 
        column-count   column-width