前言：
如今小伙伴们对“h5 flex布局”大约比较关切，看官们都需要了解一些“h5 flex布局”的相关知识。那么小编在网上搜集了一些对于“h5 flex布局””的相关内容，希望你们能喜欢，看官们一起来了解一下吧！传统布局会用到margin，float，position。这个例子，我用flex，弹性布局。完成这个例子有三个文件，两个图片是我用ps做的，大的有640*1040，小的是300*300，其实大小无所谓，关键还是在布局。
一、先看一下完成后的界面，我不想搞太多图，因为我的PS水平一般，这个标识图还是从wps里拿来的，好了，重点在布局。
根据图片，我规划为flex的列布局，我也划分了比例，大概如下图：
二、做个盒子main，它就是主要的盒子。
用谷歌浏览器或是其它浏览器，F12进入控制台，调用手机预览界面。
三、你会发现这个手机界面红色满屏，可惜有间隙，问题在body，我们去掉它。
margin为0就能去掉间隙。间隙没有了。
四、开始放各个盒子了，数了一下，一共五个，用flex排列好，为了区分，我加了背景色和1个像素的间隔，你们会发现，这五个盒子挤在了一起，因为他们没有分配比例，也就是还没有弹性。
五、这些盒子都没有按比例布满它们的父盒子main，给它们加flex样式，按原先我标的比例分配添加样式。
确实得出了比例是2：2：3：2：1。
六、盒子都弄好了，可以放东西了，把原先的背景色去掉，放main盒子的背景。
七、在2的位置放两行字和图片。
重新把box命名为box1,box2……你会发现两行字太贴左边了，于是加padding。h3和h5分得太开，用相对定位调整一下。
八、做第三块，放帐号密码输入框，让它们水平居中。
九、账号和密码间间隔开，然后在密码右下角加上“忘记密码”字样，调整位置。
十、加登录按钮。
十一、加上最后一行字，就完成整个网页的制作了，在这个网页的制作中，我没有做后台数据处理，只为布局而界面，甚至于里面的链接都没加上空链接，希望大家不要介意。
图片素材在这里：
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <style> body{ margin: 0px; } .main{ width: 100vw; height: 100vh; /* vh,vw是可视面积的单位100为满*/ background: url(bg.png) no-repeat; /* 背景图不重复 */ background-size: 100% auto; /* 背景图以宽度100%，高度随图大小自动 */ display: flex; /* 用flex布局 */ flex-direction: column; /* 列排布局 */ } .flex1{ flex: 1; } .flex2{ flex: 2; } .flex3{ flex: 3; } img{ width: 20px; height: 20px; } .box2{ padding: 0px 10px; /* 让它有左右边距10 */ } .box2 h5{ position: relative; top: -20px; /* h5和h3分得太开了，往上靠20px */ } .box3{ text-align: center; /* 内容水平居中 */ } .box3 input{ font-size: 18px; /* 改输入框字的大小 */ border: none; /* 去掉边框 */ border-bottom: 1px solid #333; /* 加底部边框 */ } .box3 span{ font-size: 12px; /* 字变小 */ position: relative; /* 相对定位 */ top: -20px; right: -100px; } .box3 button{ width: 200px; height: 40px; font-size: 16px; background: #ed7d31; border: none; border-radius: 20px; } .box5{ text-align: center; } </style></head><body> <div class="main"> <div class="box1 flex2"></div> <div class="box2 flex2"> <h3><img src="logo.png" alt=""> 某某管理中心</h3> <h5>信息技术是生产力，要好好利用它哦</h5> </div> <div class="box3 flex3"> <p>账号：<input type="text"></p> <br> <p>密码：<input type="password"></p> <span>忘记密码？</span> <br><br> <!-- 请原谅的我的不严谨，用br来换行加大距离 --> <button>登 录</button> </div> <div class="box4 flex2"></div> <div class="box5 flex1">还没有账号?先去注册吧！</div> </div></body></html> 标签： #h5 flex布局
