h5学习笔记:flex

flex部署可以很方便布局横向和垂直纵向的设计。所以在编写小程序可以放心使用。
flex 依旧有浏览器兼容性的问题。但是ie 8 这种浏览器真不管太多了。

今晚做一个练习,记录一下之前工作中用到用法。flex是一种常用布局方式,使用这种方式处理一些布局。

line-height 用于文本居中的显示
flex 的中间距采取了 justify-content:space-between; 均等的方式实现。
flex 采取了换行,横向排的做法。

采取margin-left 和 margin-right 的做法可以缩短底部描边的问题,让左右两边预留空间感。

relative 和 absolute的配合用法。相对和绝对配合的使用。

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=0" />
    </head>
    <style> body{ margin: 0; padding: 0; } .topbar{ background-color: orange; height: 60px; margin-bottom: 20px; position: relative; } .topbar .top-name{ line-height: 60px; margin-left: 15px; color: white; font-size: 18px; } .topbar .top-money{ line-height: 60px; margin-left: 15px; color: white; font-size: 18px; position: absolute; right: 15px; } .money{ margin-top: 30px; font-size: 28px; border-bottom: 1px solid #000000; margin-left: 25px; margin-right: 25px; padding-bottom: 10px; } .grids{ display: flex; flex-direction: row; flex-wrap: wrap; /*换行*/ justify-content:space-between; margin: 0 15px 0 15px; } .grid-item{ width:30%; height:30%; border: 1px solid #888888; text-align: center; line-height: 100px; margin-bottom: 15px; } .active { border: 1px solid #FF0000; color: red; } </style>
    <body>
          <div class="topbar">
             <span class="top-name">张三</span>
             <span class="top-money">剩下30元</span>
          </div>
           <div class="grids">
              <div class="grid-item active">
                  <span>10元</span>
              </div>
              <div class="grid-item">
                 <span>20元</span>
              </div>
              <div class="grid-item">
                 <span>30元</span>
              </div>
                  <div class="grid-item">
                 <span>40元</span>
              </div>
              <div class="grid-item">
                 <span>50元</span>
              </div>
              <div class="grid-item">
                 <span>60元</span>
              </div>

           </div>
           <div>
             <div class="money">支付10元购买</div>
         </div>
    </body>
</html>

这里写图片描述

好,睡觉去。

相关文章
相关标签/搜索