移動端導航佈局
寫在最前：移動端中導航的網格式佈局無處無在，寬高怎麼設定相適應？元素怎麼居中對齊？不同場景怎麼選擇程式碼最高效？巧妙使用margin、padding等基礎屬性，小小技巧可以解決許多煩惱！
一、Float佈局
1、場景
首頁導航佈局（無間距）
2、頁面佈局
<div class="g-grid">
<div class="g-grid-item">
<div class="g-grid-imgWrap">
<img class="item-img" src="img/g1.png" />
</div>
<p class="g-grid-label">汽車票船票</p>
</div>
<!-- 以下九個子元素佈局相同省略 -->
</div> 3、樣式程式碼
.g-grid {
text-align: center;
overflow: hidden;
background: #fff;
}
.g-grid-item {
position: relative;
float: left;
width: 20%;
padding: 10px 0;
text-align: center;
}
.g-grid-imgWrap {
display: inline-block;
width: 30%;
height: 0;
padding-bottom: 30%;
}
.g-grid-imgWrap img {
width: 100%;
}
.g-grid-label {
font-size: 12px;
color: #333;
} 4、程式碼解析（高度根據寬度進行自適應問題）
①、父元素g-grid通過overflow: hidden建立BFC，使得整體高度從1變成自適應。通常可使用clearfix來清除浮動的副作用
.clearfix:after{
display: block;
clear: both;
content: "";
visibility: hidden;
height: 0;
}
.clearfix{
zoom:1;
}②、子元素g-grid-item通過float: left屬性浮動起來，這也是該方法最主要的屬性。
③、移動端比較常見的一個需求是高度根據寬度進行自適應
width: 30%;
height: 0;
padding-bottom: 30%; 引申：vh和vw是css引入視口的概念來代替顯示器的物理尺寸，它們作為單位的時候也可實現該效果，雖然現在相容性慢慢變好，但是Android4.4之前不支援是硬傷。
vw：1vw等於視口寬度的1%。
vh：1vh等於視口高度的1%。
height:1vw;
width:1vw;一、Display：inline-block佈局
1、場景
首頁導航佈局（有間距）
2、樣式程式碼
頁面佈局與Float佈局相同
.g-grid {
margin-right: -2%;
padding: 10px 10px 0;
font-size: 0;
background: #fff;
}
.g-grid-item {
position: relative;
display: inline-block;
width: 31.33%;
padding-bottom: 31.33%;
margin-right: 2%;
margin-bottom: 10px;
}
.g-grid-imgWrap {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 20px;
}
.g-grid-imgWrap img {
width: 100%;
height: 100%;
}
.g-grid-label {
position: absolute;
bottom: 0;
width: 100%;
height: 20px;
line-height: 20px;
font-size: 12px;
color: #333;
text-align: center;
}3、程式碼解析（去除最後一個元素margin-right值）
①、g-grid-item設定display：inline-block佈局經常會使得元素元素間莫名其妙出現空隙。可以在寫程式碼時使得元素和元素緊緊相連，但不太方便我們編寫程式碼，IDE格式化之後也會自動分開。此處建議設定父元素g-grid的font-size屬性為0就可以去掉空隙。
②、g-grid-item這些子元素之間需要間隔時用到margin-right(或者margin-left)，經常要處理最後一行設定為margin-right(或者margin-left)為0。有以下解決方法：
- 手動或者js為最後一個元素新增一個margin-right：0
- 通過偽類:nth-child(3n)來設定margin-right：0
- 在g-grid-item的父元素設定margin-right: -2%;（推薦該方法）
樓上的float佈局也可以使用該方法去設定間隙
③、寬高多少不僅僅可以通過設定值來決定，該例子裡面使用以下程式碼實現了width：100%，高度為父級高度減去20px,根據場景不同來決定寫法。
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 20px;
④、float佈局和display：inline-block佈局的水平居中通常使用text-align: center;，子元素在父元素裡水平居中要求子元素display不為block
三、Grid佈局
1、場景
網格佈局（無間距）
2、頁面佈局
<div class="g-grid">
<div class="g-grid-item">
<img class="item-img" src="img/g1.png" />
<p class="g-grid-label">汽車票船票</p>
</div>
<!-- 以下八個子元素佈局相同省略 -->
</div>3、樣式程式碼
.g-grid {
display: grid;
grid-template-columns: repeat(3, 33.33%);
grid-template-rows: repeat(3, 100px);
background: #fff;
}
.g-grid-item {
display: inline-grid;
border-right: 1px solid #eee;
border-top: 1px solid #eee;
align-content: center
justify-items: center;
}
.g-grid-item:nth-child(3n) {
border-right: none;
}
.g-grid-item img {
height: 30px;
width: 30px;
}
.g-grid-label {
font-size: 12px;
color: #333;
}4、程式碼解析
①、grid佈局通過grid-template-columns和grid-template-rows來設定幾列幾行
②、g-grid-item通過設定align-content: center;來使得子元素都處於垂直居中，justify-items: center來使得子元素都處於水平居中
PPT模板下載大全https://www.wode007.com
四、Flex佈局
1、場景
九宮格佈局（有空隙）
2、樣式程式碼
頁面佈局與Grid佈局相同請輸入程式碼
.g-grid {
display: flex;
flex-wrap: wrap;
}
.g-grid-item {
flex: 0 1 31.33%;
margin: 0px 1% 10px;
padding: 1.2rem;
box-sizing: border-box;
text-align: center;
background: #eee;
}
.g-grid-item img {
height: 30px;
width: 30px;
}
.g-grid-label {
font-size: 12px;
color: #333;
}3、程式碼解析(Flex換行顯式且存在間距)
①、Flex佈局通過flex-wrap: wrap;來進行換行，但當需要元素與元素之間存在間距時，不能使用justify-content: space-between;，減少一個元素會變成下圖：
所以該例子通過margin來設定間距。
②、.g-grid-item設定flex: 0 1 31.33%;意思是元素的本來大小為父元素的31.33%，空間不足時該元素將縮小，存在剩餘空間也不放大。
當該值設為flex: 1 1 31.33%;時，減少一個元素會變成下圖：