移动端开发小记 - Flexbox

dddd

在开发移动端页面的时候,出去布局方便和减少代码量的考虑,使用了 Flexbox 的布局方式,在其中也遇到了一些问题,简单记录下。

什么是 Flexbox

说到 Flexbox,大家应该都不陌生,网络上也有 N 多的教程。但是在这里还是简单说一下,就当回顾知识了吧。

CSS 2.1 定义了四种布局模式 ― 由一个盒与其兄弟、祖先盒的关系决定其尺寸与位置的算法:

而 Flexbox(伸缩布局)是为了呈现复杂的应用与页面而设计出来的,一种更加方便有效,能够在未知或者动态尺寸的情况下自由分配容器空间的布局方式。

要说明 Flexbox 的布局模型,就必须要放规范上的这张图:

移动端开发小记 - Flexbox

使用 Flexbox

现在大部分的主流浏览器都已经支持了 Flexbox 或者它的旧版语法。如果是使用在移动端,基本上是都支持的。为了兼容新老版本的语法,可以这样使用( Less ):

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
//父元素
.flex-box() {
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
}
//子元素
.flex(@v) {
-webkit-box-flex: @v;
-moz-box-flex: @v;
-webkit-flex: @v;
-ms-flex: @v;
flex: @v;
}

为子元素设置了 flex: 1,这样容器里面的子元素可以均分容器的空间。当然,可以为某个子元素指定一个宽度,这样剩下的子元素就会平分剩下的空间。

如下图中的品牌墙:

移动端开发小记 - Flexbox

flex-basis

这个属性,还是要稍微说一说的。这个属性是新版规范里面提到的属性。它用来描述伸缩元素( flex-item )的初始主轴尺寸和基准值,也就是在根据伸缩比率计算剩余空间分布之前的尺寸值,如果在 flex 中省略了这个值,则默认值是 0注意没有单位 。它的另一个取值是 auto ,这个时候,元素的初始主轴长度和基准值就是它本身的主轴长度,即取决于本身的内容长度。

两个取值的区别如下图:

移动端开发小记 - Flexbox

看图更容易理解一些:值为 0 时,元素分配的是容器的空间。而当值为 auto 时,它分配的是减去元素内容之后剩余的容器空间。

在值为 auto 时,它的表现跟老版 Flex 规范的伸缩比例表现是一致的,如果盒子内容大小不一致,则每个盒子最后分配的空间大小也不一致。

所以,在处理这个显示异常时,要在元素上加一个 width: 0%; 来使其表现的正常。实际上,flex-basis: 0; 的行为就是为元素加上一个类似 width: 0%; 的属性,来分配容器空间。

Flexbox 这个模块有很多的属性,这里只介绍最基本的使用,更多内容详见规范或者 Google。

需要注意的点

By the way

还有一个有用的 CSS 属性,在移动端已经基本支持了,就是 box-sizing: border-box;。它在使用 padding 时非常有用,可以避免 widthpadding 的计算。可以这样子用:

1
2
3
4
5
.box-sizing(@v) {
-webkit-box-sizing: @v;
-moz-box-sizing: @v;
box-sizing: @v;
}

不过,要注意,在这种盒模型下,边框的宽度也会算在宽度里。