h5学习笔记：flex
flex部署能够很方便布局横向和垂直纵向的设计。因此在编写小程序能够放心使用。
flex 依旧有浏览器兼容性的问题。可是ie 8 这种浏览器真无论太多了。css
今晚作一个练习，记录一下以前工做中用到用法。flex是一种经常使用布局方式，使用这种方式处理一些布局。html
line-height 用于文本居中的显示
flex 的中间距采起了 justify-content:space-between; 均等的方式实现。
flex 采起了换行，横向排的作法。web
采起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>
好，睡觉去。svg