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

2020-12-24T16:59:00

有点标题党的嫌疑,但 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 表示项目顶部对齐,其他依次是底部对齐、居中对齐、文本线底部对齐、延伸对齐(若项目未设置高度则拉长到容器高度)。

align-content 定义的是每排项目的纵向上的对齐方式,对象是多排项目,单排则不起作用,align-content: flex-start | flex-end | center | space-between | space-around | stretch;

一步到位的配置(针对列表内容的初步调整):

.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」版。发表评论请点击:完整版 »