移動端導航佈局（基礎屬性解決大問題）

---

寫在最前：移動端中導航的網格式佈局無處無在，寬高怎麼設置相適應？元素怎麼居中對齊？不一樣場景怎麼選擇代碼最高效？巧妙使用margin、padding等基礎屬性，小小技巧能夠解決許多煩惱！

1、Float佈局

一、場景

首頁導航佈局（無間距）

二、頁面佈局

<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>

三、樣式代碼

.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;
}

四、代碼解析（高度根據寬度進行自適應問題）

①、父元素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屬性浮動起來，這也是該方法最主要的屬性。

③、移動端比較常見的一個需求是高度根據寬度進行自適應。這個時候可使用到padding-bottom。當width和padding-bottom相等時就實現了寬高相等（注意要將height置爲0），觸類旁通，各類比例下也能夠設置。

width: 30%; 
height: 0; 
padding-bottom: 30%;

引伸：vh和vw是css引入視口的概念來代替顯示器的物理尺寸，它們做爲單位的時候也可實現該效果，雖然如今兼容性慢慢變好，可是Android4.4以前不支持是硬傷。
vw：1vw等於視口寬度的1%。
vh：1vh等於視口高度的1%。

height:1vw;
width:1vw;

1、Display：inline-block佈局

一、場景

首頁導航佈局（有間距）

二、樣式代碼

頁面佈局與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;
}

三、代碼解析（去除最後一個元素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。有如下解決方法：

1. 手動或者js爲最後一個元素添加一個margin-right：0
2. 經過僞類:nth-child(3n)來設置margin-right：0
3. 在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

3、Grid佈局

一、場景

網格佈局（無間距）

二、頁面佈局

<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>

三、樣式代碼

.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;
}

四、代碼解析

①、grid佈局經過grid-template-columns和grid-template-rows來設置幾列幾行
②、g-grid-item經過設置align-content: center;來使得子元素都處於垂直居中，justify-items: center來使得子元素都處於水平居中

4、Flex佈局

一、場景

九宮格佈局（有空隙）

二、樣式代碼

頁面佈局與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;
}

三、代碼解析(Flex換行顯式且存在間距)

①、Flex佈局經過flex-wrap: wrap;來進行換行，但當須要元素與元素之間存在間距時，不能使用justify-content: space-between;，減小一個元素會變成下圖：

因此該例子經過margin來設置間距，這個是比較通用的方法。

@vczhan 提供了一個思路，父級爲justify-content: space-between;或者justify-content: space-around;的同時，加上

.g-grid::after {
  content: "";
  width: 31.33%;
}

能夠解決三列下的問題，可是四或以上列下不固定個數的狀況下仍是不適用，請根據本身使用場景選擇方案。同理 @Ice丶Wing 提供的空div思路相似，也能夠這麼處理。
（再次謝謝兩位！）

②、.g-grid-item設置flex: 0 1 31.33%;意思是元素的原本大小爲父元素的31.33%，空間不足時該元素將縮小，存在剩餘空間也不放大。

當該值設爲flex: 1 1 31.33%;時，減小一個元素會變成下圖：

尊重原創，如需轉載請註明出處！