一步学会移动端 Flex 弹性盒子布局

有点标题党的嫌疑，但 Flex 弹性盒子布局使用确实不难，我主要用来快速解决移动端列表内容排版问题。比如两列商品排列，如果设置定宽，则在只是适配一种规格的设备。使用 rem 也不能完全解决问题，因为总有那么些项不是那么合适。media 也可以适配，但写那么多遍的那么多项的样式太繁琐。一些弹性布局诸如 bootstrap 或者 xxUI，一般采用百分比布局的方式来解决这个问题。外部容器 margin 调整两边间距，内部项使用百分比弹性显示，可以撑满整个屏幕。

解决问题的方案还是很多的，但人还是懒的，想着能不能简单点就实现类似的弹性布局功能。Flex 弹性盒子布局就是首选项。之前听说过它的大名，justify-content 之类的属性也很眼熟，但一直没有机会使用。

Flex 弹性盒子是基于传统盒子布局的，主要依赖 display 属性 + position 属性 + float 属性实现。它对于那些特殊布局非常不方便，比如，垂直居中就不容易实现。这是阮一峰老师在他的 Flex 布局教程：语法篇中开篇写的。作为一个白嫖党，阮老师的博客质量非常高，很喜欢。

Flex 布局主要关注两个东西，一个叫容器，就是盒子；一个叫项目，就是盒子里装的东西。容器和项目都有自己的属性可以设置。推荐使用 Flex 弹性布局加百分比项目宽度来适配各种尺寸的设备。对于想要一步学会 Flex 布局的人来说，主要关注点放在容器的属性上。容器的属性有 6 个：

flex-direction
flex-wrap
flex-flow
justify-content
align-items
align-content

flex-direction 决定内部项目的排列方向，flex-direction: row | row-reverse | column | column-reverse;。默认为 row 表示从左到右，其他依次是从右到左，从上到下，从下到上，很好识别。

flex-wrap 决定内部项目是否换行和换行的姿势， flex-wrap: nowrap | wrap | wrap-reverse;。默认为 no-wrap 表示不换行，其他依次是正常换行、换行后项目显示在第一行的上面。

flex-flow 属性是 flex-direction 属性和 flex-wrap 属性的简写形式，默认值为 row nowrap。

justify-content 决定内部项目横向上的对齐方式，justify-content: flex-start | flex-end | center | space-between | space-around;，默认为 flex-start 表示项目左对比，其他依次是右对齐、居中对齐、两端对齐、等距对齐。项目之间还是会有一定的间隔的，且项目之间的间距是相等的。

align-items 决定项目纵向上的对齐方式， align-items: flex-start | flex-end | center | baseline | stretch;，默认为 flex-start 表示项目顶部对齐，其他依次是底部对齐、居中对齐、文本线底部对齐、延伸对齐（若项目未设置高度则拉长到容器高度）。

一步到位的配置（针对列表内容的初步调整）：

.box {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
    align-content: center;
}

对于使用 justify-content 属性值为 space-around; 或者 space-between; 的情况下不需要对项目加外间距去调整，flex 布局本身会自动添加间距（其他情况是有必要添加间距的）。对于项目需要两边对齐，使用 justify-content: space-between; 就好。这样整体的列表就调整好了，之后再去做一些样式微调即可。

更多详细属性说明，查看 Flex 布局教程：语法篇 - 阮一峰的网络日志。

当前页面是本站的「Baidu MIP」版。发表评论请点击：完整版 »