微信小程序之Flex容器详解

3,344 阅读5分钟

原文首发于微信公众号:躬行之,欢迎关注交流!

Flex 是 W3C 提出的一种新的布局方案,可以非常方便的完成响应式页面布局,到目前为止几乎所有浏览器都支持,Flex 是 Flexible Box 的缩写,翻译过来是"弹性布局"的意思,下面一起来学习 Flex 布局的使用。

  1. 基础概念
  2. flex容器属性
  3. flex项目属性
  4. 总结

基础概念

采用 Flex 布局的元素称为 Flex 容器,所有子元素将自动成为容器成员,也可以称之为 Flex 项目,也就是该 Flex 布局的子 View ,下面是 Flex 布局默认设置下的示意图:

图片来源于网络

如上图所示,默认的 Flex 容器的存在两个轴:水平的主轴(main axis)和垂直的交叉轴(cross axis),主轴和交叉轴的方向不是绝对的,而是会因为设置的不同而不同,下面是与主轴和交叉轴相关的几个位置:

  • 主轴起始点(main start):主轴的开始位置
  • 主轴的结束点(main end):主轴的结束位置
  • 主轴空间(main size):单个 Flex 项目占据的主轴空间
  • 交叉轴的起始点(cross start):交叉轴的起始点
  • 交叉轴的结束点(cross end):交叉轴的结束点
  • 交叉轴空间(cross size):单个 Flex 项目占据的交叉轴空间

flex容器属性

  1. flex-direction:设置主轴的方向,可设置的值如下:
  • row:默认值,设置主轴为水平方方向,起点在左边
  • row-reverse:设置主轴为水平方向,起点在右边
  • column:设置主轴为垂直方向,起点在上边
  • column-reverse:设置主轴为垂直方向,起点在下边
rowrow-reversecolumncolumn-reverse
rowrow-reversecolumncolumn-reverse
  1. flex-wrap:设置如何换行,可设置的值如下:
  • nowrap:默认值,不换行
  • wap:自动换行
  • wrap-reverse:自动换行,在第一行的上一行
nowrapwapwrap-reverse
nowrapwrapwrap-reverse
  1. flex-flow:flex-direction 属性和 flex-wrap 属性的简写形式,默认值为 row nowrap。

  2. justify-content:设置项目在主轴上的对齐方式,可设置的值如下:

  • flex-start:默认值,左对齐
  • flex-end:右对齐
  • center:居中对齐
  • space-between:两端对齐
  • space-around:每个项目两侧的间隔相等,与屏幕边缘的间隔是其他项目之间间隔的一半
  • space-evenly:平均分布各个项目,与屏幕边缘的间隔与其他项目之间的间隔相等
flex-startflex-endcenterspace-betweenspace-aroundspace-evenly
flex-startflex-endcenterspace-betweenspace-aroundspace-evently
  1. align-items:设置项目在交叉轴上如何对齐,可设置的值如下::默认值,如果没有项目未指定高度或设置为auto,则项目会占满整个容器的高度,可设置的值如下:
  • stretch:默认值,如果没有项目未指定高度或设置为auto,则项目会占满整个容器的高度,下面图示中项目 1 就未指定高度,其余项目都指定了高度 就未指定高度
  • flex-start:设置与交叉轴的起点对齐
  • flex-end:设置与交叉轴的结束点对齐
  • center:设置与交叉轴的重点对齐
  • baseline:设置项目与项目中第一行文字基线对齐
stretchflex-startflex-endcenterbaseline
stretchflex-startflex-endcenterbaseline
  1. align-content:设置多根轴线的对齐方式,如果只有一个轴则该属性不生效,可设置的属性如下:
  • stretch:默认值,轴线占满整个交叉轴
  • flex-start:设置与与交叉轴的起点对齐
  • flex-end:设置与交叉轴的终点对齐
  • center:设置与交叉轴的中点对齐
  • space-between:设置与交叉轴两端对齐,轴线之间的间隔平均分布
  • space-around:设置每根轴线两侧的间隔都相等,轴线与轴线的间隔是轴线到交叉轴边缘间隔的两倍
stretchflex-startflex-endcenterspace-betweenspace-around
stretchflex-startflex-endcenterspace-betweenspace-around

flex项目属性

  1. order:默认值为0,设置项目的排列顺序,数值越小,排列越靠前,如下图所示:

order

  1. flex-grow:设置项目的放大比例,默认值为0,如果存在剩余空间也不放大,如下图所示:
flow-grow=0flow-grow=1flow-grow设置不同值
flow-growflow-growflow-grow
  1. flex-shrink:设置项目的缩小比例,默认值为 1,如果项目空间不足,则项目将缩小,如下图所示:
flow-shrink=1flow-shrink=0flow-shrink设置不同值
flex-shinkflex-shinkflex-shink

上面图示中,当 flex-shrink 全设置为 0,每个项目不会缩放,所以第四个方块被挤出去了,而相应的设置 flex-shrink 为 1,则可以在空间不足是进行一定程度的缩放。

  1. flex-basis:项目所占的主轴空间,如下图所示:

flex-basis

  1. align-self:定义元素自身的对齐方式,该属性与 align-items 属性差不多,具体就不一一介绍了,直接上效果图如下:
autostretchflex-startflex-endcenterbaseline
autostretchflex-startflex-endcenterbaseline

上面的效果中设置 auto 会跟随 flex 容器中 align-items 的设置。

  1. flex:flex 是 flex-grow, flex-shrink 和 flex-basis 的简写,默认值为0 1 auto,这里就不在贴效果图了。

总结

最近尝试了一下微信小程序,感觉开发起来难度也不是很大,觉得本篇文章的内容也是微信小程序中最重要的内容了,本来打算继续进行小程序系列的学习,但是看了一下后面的内容无非就是小程序各个组件的使用了,如果有其他项目的开发经验,实在没必要一个组件一个组件去验证学习,所以小程序的学习就到此为止,最后,说一点微信小程序最重要的我觉得还是 Flex 布局。可以选择关注个人微信公众号:躬行之 获取最新更新,一起交流学习!

1.png