学习flex布局对于移动端的适应是十分重要的，可以大量减少重复性代码的编写。
推荐到菜鸟教程进行学习
这里主要实现了一个简单的例子
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" /> <title>Flex布局测试</title> <style type="text/css"> html,body{ height: 100%; } body,p,h1,h2,h3{ padding: 0; margin: 0; } .content{ display: flex; background-color: #EEEEEE; flex-flow: column; height: 100%; } .main{ flex: 1; display: flex; padding: 20px; flex-flow: row wrap; justify-content: space-around; } .main .mainItem{ padding: 8px; box-sizing: border-box; height: 50%; width: 33.3%; } .main .topbar{ padding: 8px; box-sizing: border-box; height: 50%; width: 66.6%; } .main .mainItem>div,.main .topbar>div{ height: 100%; width: 100%; border-radius: 8px; box-shadow: 1px 1px 2px 2px lightgrey; } /*.main .mainItem>div:hover{ box-shadow: 0px 0px 6px 2px lightgrey; }*/ .footer{ height: 60px; background-color: #fff; box-shadow: 0px 0px 4px 2px lightgrey; width: 100%; display: flex; box-sizing: border-box; justify-content: space-around; } .footer .foot_item{ height: 60px; width: 60px; box-sizing: border-box; padding: 5px; display: inline-block; text-align: center; } .footer .foot_item a{ text-decoration: none; color: gray; display: inline-block; height: 50px; line-height: 50px; font-size: 14px; align-self: center; } @media only screen and (min-width: 100px) and (max-width: 640px) { .check{ width: 50%!important; height: 33.3%!important; } .topcheck{ width: 100%!important; height: 33.3%!important; padding-bottom: 0px!important; } .maincheck{ padding: 0px!important; } } </style> </head> <body> <div class="content"> <div class="main maincheck"> <div class="topbar topcheck"> <div style="background-color: coral;"></div> </div> <div class="mainItem check"> <div style="background-color: lightblue;"></div> </div> <div class="mainItem check"> <div style="background-color: khaki;"></div> </div> <div class="mainItem check"> <div style="background-color: pink;"></div> </div> <div class="mainItem check"> <div style="background-color: lightgray;"></div> </div> <!--<div class="mainItem check"> <div style="background-color: lightblue;"></div> </div>--> </div> <div class="footer"> <div class="foot_item"> <a href="index.html">首页</a> </div> <div class="foot_item"> <a href="forum.html">论坛</a> </div> <div class="foot_item"> <a href="setting.html">设置</a> </div> </div> </div> </body> </html>
学习使你进步^-^
