zoukankan      html  css  js  c++  java
  • 移动端开发(二)(初级入门)

      这期给大家介绍下移动端布局。平时写,有的用百分比,有的用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;100%;}
    .box-flex{box-flex:1;-moz-box-flex:1;-webkit-box-flex:1; 100%;}
    
    
  • 相关阅读:
    块级作用域
    作用域变量 var
    unkown类型
    generator (2)
    generator (1)
    generator
    索引类型
    XML 特殊字符处理和 CDATA
    15 个实用的 PHP 正则表达式
    论MySQL数据库中两种数据引擎的差别
  • 原文地址:https://www.cnblogs.com/beyrl-blog/p/7477856.html
Copyright © 2011-2022 走看看