flex 保持 宽高比_一个简单的手机的登录界面，用flex布局，无数据处理后台「218」...

• 传统布局会用到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分得太开，用相对定位调整一下。

八、做第三块，放帐号密码输入框，让它们水平居中。

九、账号和密码间间隔开，然后在密码右下角加上“忘记密码”字样，调整位置。

十、加登录按钮。

十一、加上最后一行字，就完成整个网页的制作了，在这个网页的制作中，我没有做后台数据处理，只为布局而界面，甚至于里面的链接都没加上空链接，希望大家不要介意。

• 图片素材在这里：

---

 Document

某某管理中心

信息技术是生产力，要好好利用它哦

账号：

密码：

忘记密码？ 登 录

还没有账号?先去注册吧！