Mobile Development (ii) (Beginner's entry)

This issue introduces you to the mobile-side layout. Usually write, some in percent, some with REM to do, but regardless of which, need to understand the flex flexible box layout, into the topic:

Flex is the abbreviation for flexible box, meaning "resilient layout", which provides maximum flexibility for box-shaped models.

Let's start with an easy-to-understand and practical example:

　　

This picture, for example, is a list page for a product with three rows. So, we can give a line of three div package a large box, three items each div must add a class, on the code

<Divclass= "Dis-box">     <Divclass= "Box-flex">          <Divclass="">                <imgclass=""src="">          </Div>          <Divclass="">Product Name</Div>          <Pclass="">Price</P>     </Div>      
<DivClass= "Box-flex"><DivClass=""><ImgClass=""Src=""></Div><DivClass=""> Product Name</Div><PClass=""> Price</P></Div>
 　　　　　　 <DivClass= "Box-flex">
 　　　　　　　　　 <DivClass="">
 　　　　　　　　　　　　 <ImgClass=""Src="">
 　　　　　　　　　 </div> 
 <div class= "" > product name </div> 
 <p class=" "> Price </p> 
 </div> 
   </div>      

< Span style= "COLOR: #0000ff" > < Span style= "COLOR: #0000ff" > < Span style= "COLOR: #ff0000" > < Span style= "COLOR: #800000" >css: 
          /*flex*/
. dis-box{display:box;display:-webkit-box;display:-moz-box;width:100%;}
. box-flex{box-flex:1;-moz-box-flex:1;-webkit-box-flex:1;width:100%;}

Mobile Development (ii) (Beginner's entry)