移动端中导航的网格式布局无处无在,宽高怎么设置相适应?元素怎么居中对齐?不同场景怎么选择代码最高效?巧妙使用margin、padding等基础属性,小小技巧可以解决许多烦恼!
一、Float布局
1、场景
首页导航布局(无间距)
2、页面布局
汽车票船票
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。有以下解决方法:
手动或者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、页面布局
汽车票船票
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来设置间距,这个是比较通用的方法。
@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%;时,减少一个元素会变成下图:
尊重原创,如需转载请注明出处!