常用模式片段之CSS弹性布局

发表于 | 分类于

续前面的CSS布局篇，这篇针对移动端布局的特点整理了几种弹性布局的案例。

百分比布局

相较于写死像素绝对值的布局，百分比布局是最简单的实现弹性布局的方式，只需将原来宽度的绝对大小都替换成百分比即可。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
.layout-container {
    background: #eee;
    padding: 5px;
    font-size: 0;

    .box {
        box-sizing: border-box;
        display: inline-block;
        height: 80px;
        padding: 5px;
        width: percentage(1/3);

        .inner {
            background: #ccc;
            height: 100%;
            width: 100%;
        }
    }
}

注：部分手机浏览器无法计算到很精确的percentage，在四舍五入时会出现问题，比如总宽度超过了100%就会将最后一个元素挤到下一行去。因此将上述percentage(1/3)改为33.3%即可。

flex 布局

关于flex布局的教程请看：一个完整的Flexbox指南

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
.flexbox(){
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;

    -webkit-box-lines: multiple;
    -moz-box-lines: multiple;
    -ms-flex-wrap: wrap;
    -webkit-flex-wrap: wrap;
    flex-wrap: wrap;

    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
    -moz-box-orient: horizontal;
    -moz-box-direction: normal;
    -ms-flex-direction: row;
    -webkit-flex-direction: row;
    flex-direction: row;

    &.vertical{
        -webkit-box-orient: vertical;
        -moz-box-orient: vertical;
        -ms-flex-direction: column;
        -webkit-flex-direction: column;
        flex-direction: column;
    }
}

.flex(@grow, @shrink, @basis){
    -webkit-box-flex: @grow;
    -moz-box-flex: @grow;
    -ms-flex: @grow @shrink @basis;

    -webkit-flex-grow: @grow;
    -webkit-flex-shrink: @shrink;
    -webkit-flex-basis: @basis;
    -webkit-flex: @grow @shrink @basis;

    flex-grow: @grow;
    flex-shrink: @shrink;
    flex-basis: @basis;
    flex: @grow @shrink @basis;
}

.order($val) {
    -webkit-box-ordinal-group: $val;  
    -moz-box-ordinal-group: $val;     
    -ms-flex-order: $val;     
    -webkit-order: $val;  
    order: $val;
}

.layout-container{
    background: #eee;
    padding: 5px;

    .flexbox();
    &, *, *:after, *:before {
        box-sizing: border-box;
    }

    .box{
        background: #ccc;
        height: 80px;
        margin: 5px;
        .flex(1, 1, 0);  /*flex-basis在老webkit下不生效*/
        width: 0;  /*android有些浏览器下面如果重置宽度，不会通过flex来计算宽度*/
        max-width: 100%;
        display: block;
        /*padding: 0 !important;*/
        /*position: relative;*/
    }
}

弹性图片

弹性图片的需求是当屏幕尺寸变化时，图片保持等比缩放，且不能出现文档高度的抖动。

1
2
3
4
5
<div class="item">
	<div class="img-wrapper">
		<img src="http://img.taobaocdn.com/tfscom/TB1Fhi3HVXXXXXlXpXXSutbFXXX_q50.jpg">
	</div>
</div>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
.item{
	float: left;
	width: 50%;
}
.img-wrapper{
	margin: 0 10px 10px 0;
	position: relative;
}
.img-wrapper::before{
	content: '';
	display: block;
	padding-top: 30%;
}
.img-wrapper img{
	height: 100%;
	left: 0;
	position: absolute;
	top: 0;
	width: 100%;
}

原理

  • padding 的百分比值都是参照父元素的 width 计算出的

  • absolute 元素的 width、height 百分比值也是参照最近 relative 父元素的

  • 通过在 img 父元素内做个伪类，用padding-top将父元素撑起来，padding-top的百分比等于图片的高宽比。这样当图片未载入时，也预留出图片的占位，不会产生文档高度的跳动。

demo效果

两列同步拉伸

弹性图片的需求再进一步，需要实现等比缩放的两列布局，可以是图片，也可以是图文混排。（可参考双11商品活动页的移动端展现）

1
2
3
4
5
6
7
8
<div class="box banner">
    <div class="box-inner">
        <img class="banner-img" src="http://gtms04.alicdn.com/tps/i4/TB1BHIGHFXXXXbHXFXXTYq7_VXX-240-347.jpg">
    </div>
</div>
<div class="box item">
    <div class="box-inner"></div>
</div>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
@cellPadding: 10px;
@cellRatio: percentage(275/160);  //图片高宽比
.box{
    background: #fff;
    border: 1px solid #000;
    border-width: 0 1px 1px 0;
    border-radius: 0;
    box-sizing: border-box;

    float: left;
    position: relative;
    padding: @cellPadding;
    width: 50%;
}
.box::before{
    content: ' ';
    display: block;
    padding-top: @cellRatio;
}
.box:nth-of-type(2n){
    border-right-color: transparent;
}
.box:last-of-type,
.box:nth-last-of-type(2){
    border-bottom-color: transparent;
}

.box-inner{
    position: absolute;
    top: 10px;
    left: 10px;
    bottom: 10px;
    right: 10px;
}
.banner-img{
    height: 100%;
    width: 100%;
}
.item .box-inner{
    background: #f35656;
}

移动端布局特点：

  • 绝对定位时不要写死px，用百分比，或者同时设置top left bottom right
  • 要考虑到屏幕resize和旋转的情况

demo效果