码迷,mamicode.com
首页 > 移动开发 > 详细

移动端开发(二)(初级入门)

时间:2017-09-05 12:34:58      阅读:182      评论:0      收藏:0      [点我收藏+]

标签:一个   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%;}

 

移动端开发(二)(初级入门)

标签:一个   logs   介绍   es2017   灵活   src   color   名称   开发   

原文地址:http://www.cnblogs.com/beyrl-blog/p/7477856.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!