學習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>
學習使你進步^-^