放大：
伸縮佈局的相關知識點：
flex：none
| <' flex-grow '>
<' flex-shrink >'?
|| <' flex-basis '>
none： none關鍵字的計算值爲: 0 0 auto <' flex-grow '>： 用來指定擴展比率，即剩餘空間是正值時此「flex子項」相對於「flex容器」裏其他「flex子項」能分配到空間比例。
在「flex」屬性中該值如果被省略則默認爲「1」 <' flex-shrink '>： 用來指定收縮比率，即剩餘空間是負值時此「flex子項」相對於「flex容器」裏其他「flex子項」能收縮的空間比例。
在收縮的時候收縮比率會以伸縮基準值加權
在「flex」屬性中該值如果被省略則默認爲「1」 <' flex-basis '>： 用來指定伸縮基準值，即在根據伸縮比率計算出剩餘空間的分佈之前，「flex子項」長度的起始數值。
在「flex」屬性中該值如果被省略則默認爲「0%」
在「flex」屬性中該值如果被指定爲「auto」，則伸縮基準值的計算值是自身的 <' width '> 設置，如果自身的寬度沒有定義，則長度取決於內容。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
* {
margin: 0;
padding: 0;
list-style: none;
}
a {
text-decoration: none;
color: #333;
}
img {
display: block;
width: 100%;
}
/*導航模塊*/
.item {
height: 90px;
display: flex;
background-color: deeppink;
margin:10px;
border-radius: 15px;
}
.item .pub {
flex:1;
width: 200px;
border-right: 1px solid #fff;
border-bottom: 1px solid #fff;
border-top: 1px solid #fff;
}
.item .sub {
flex:2;
}
.item .sub a {
height: 45px;
line-height: 45px;
width: 50%;
float: left;
border: 1px solid #fff;
/*設置盒子的內減模式*/
box-sizing: border-box;
}
.item:nth-child(2) {
background-color: lightyellow;
}
.item:nth-child(3) {
background-color: lightblue;
}
.item:nth-child(4) {
background-color: lightgreen;
}
.extre {
display: flex;
}
.extre a {
margin: 5px;
height: 100px;
overflow: hidden;
flex:1;
}
.f-nav {
margin: 5px;
height: 40px;
line-height: 40px;
border-top: 1px solid #ccc;
border-bottom: 1px solid #ccc;
display: flex;
text-align: center;
}
.f-nav li {
flex:1;
}
.footer p {
text-align: center;
font-size: 16px;
color: #999;
line-height: 30px;
}
.item:nth-child(4) .pub a{
display: block;
width: 100%;
height: 45px;
line-height: 45px;
box-sizing: border-box;
border-bottom: 2px solid #fff;
}
</style>
</head>
<body>
<div class="layout">
<div class="banner">
<a href="#"><img src="banner.png"></a>
</div>
<div class="nav">
<div class="item">
<div class="pub"></div>
<div class="sub">
<a href="javascript:;">海外酒店</a>
<a href="">團購</a>
<a href="">特惠酒店</a>
<a href="">客棧公寓</a>
</div>
</div>
<div class="item">
<div class="pub"></div>
<div class="sub">
<a href="javascript:;">海外酒店</a>
<a href="">團購</a>
<a href="">特惠酒店</a>
<a href="">客棧公寓</a>
</div>
</div>
<div class="item">
<div class="pub"></div>
<div class="sub">
<a href="javascript:;">海外酒店</a>
<a href="">團購</a>
<a href="">特惠酒店</a>
<a href="">客棧公寓</a>
</div>
</div>
<div class="item">
<div class="pub">
<a href="#">門票</a>
<a href="#">10000</a>
</div>
<div class="sub">
<a href="javascript:;">海外酒店</a>
<a href="">團購</a>
<a href="">特惠酒店</a>
<a href="">客棧公寓</a>
</div>
</div>
<div class="extre">
<a href="#"><img src="a_03.jpg"></a>
<a href="#"><img src="a_06.jpg"></a>
</div>
<div class="footer">
<ul class="f-nav">
<li>客戶端</li>
<li>關於</li>
<li>聯繫我們</li>
</ul>
<p>歡迎 | 歡迎 | 歡迎</p>
<p>@2015 攜程旅行
</div>
</div>
</div>
</body>
</html>