乐趣区

移动端导航布局基础属性解决大问题

jiezi

写在最前：移动端中导航的网格式布局无处无在，宽高怎么设置相适应？元素怎么居中对齐？不同场景怎么选择代码最高效？巧妙使用 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 属性浮动起来，这也是该方法最主要的属性。

③、移动端比较常见的一个需求是 高度根据宽度进行自适应。这个时候可以使用到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;

一、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。有以下解决方法：

  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

三、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来使得子元素都处于水平居中

四、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%; 时，减少一个元素会变成下图：

尊重原创，如需转载请注明出处！

退出移动版