Some of the summary of flex

How to become a box elastic box?

1. Define a resilient property box:

display: flex -> This is the definition of a resilient property box.

flex: -direction: row -> define the direction of the spindle. There are four values ​​are ↓↓

row: spindle in the horizontal direction, the sub-elements are arranged horizontally from the left. (Defaults) 

 row-reverse: the spindle in the horizontal direction, the sub-elements are arranged horizontally from right to left (not used) 

column: a vertical direction of the spindle, the sub-elements are arranged vertically from top to bottom 

column-reverse: the spindle in the vertical direction, are arranged vertically from top to bottom sub-element (not used)

<style> 
        .box { 
            width : 600px ; 
            height : 600px ; 
            border : 1px Solid # 000 ;
             / * define a resilient box * / 
            the display : Flex ;
             / * main axis direction elastically box defined * / 
            Flex-direction : Row ; 
        } 
        .info .box { 
            width : 100px ; 
            height : 100px ;
            background-color: orange;
            text-align: center;
            line-height: 100px;
        }
    </style>

1 <div class="box">
2     <div class="info">1</div>
3     <div class="info">2</div>
4</div>