移動端開發（二）（初級入門）

標籤：一個   logs   介紹   es2017   靈活   src   color   名稱   開發   

　　這期給大家介紹下移動端布局。平時寫，有的用百分比，有的用rem來做，但無論哪種，都需要瞭解flex彈性盒子布局，進入正題：

　　Flex是Flexible Box的縮寫，意為”彈性布局”，用來為盒狀模型提供最大的靈活性。

　　先舉個易於理解並實用的例子：

　　

　　比如說這張圖片，是一個商品的列表頁，一行有三個。那麼，我們可以給一行三個div包一個大盒子，三個商品每個div都要加一個class,上代碼

<div class="dis-box">     <div class="box-flex">          <div class="">                <img class="" src="">          </div>          <div class="">商品名稱</div>          <p class="">價格</p>     </div>      
　　　<div class="box-flex">          <div class="">               <img class="" src="">          </div>          <div class="">商品名稱</div>               <p class="">價格</p>          </div>
　　　　　　<div class="box-flex"> 
　　　　　　　　　<div class=""> 
　　　　　　　　　　　　<img class="" src=""> 
　　　　　　　　　</div> 
　　　　　　　　　<div class="">商品名稱</div> 
　　　　　　　　　<p class="">價格</p> 
　　　　　　</div>
</div>

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%;}

 

移動端開發（二）（初級入門）