h5学习笔记：flex

最新推荐文章于 2024-07-31 02:02:05 发布

hero82748274

最新推荐文章于 2024-07-31 02:02:05 发布

阅读量897

点赞数

分类专栏： javascript和Egret相关

本文链接：https://blog.csdn.net/hero82748274/article/details/78526301

版权

javascript和Egret相关专栏收录该内容

97 篇文章 4 订阅

订阅专栏

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>