微信小程序使用Flex容器

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-revarse:设置主轴为水平方向,起点在右边
  • column:设置主轴为垂直方向,起点在上边
  • column-revarse:设置主轴为垂直方向,起点在下边

2. flex-wrap:设置如何换行,可设置的值如下:

  • nowrap:默认值,不换行
  • wap:自动换行
  • wrap-revarse:自动换行,在第一行的上一行

3. flex-flow:flex-direction 属性和 flex-wrap 属性的简写形式,默认值为 row nowrap。

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

  • flex-start:默认值,左对齐
  • flex-end:右对齐
  • center:居中对齐
  • space-between:两端对齐
  • space-around:每个项目两侧的间隔相等,与屏幕边缘的间隔是其他项目之间间隔的一半
  • space-evenly:平均分布各个项目,与屏幕边缘的间隔与其他项目之间的间隔相等

5. align-items:设置项目在交叉轴上如何对齐,可设置的值如下::默认值,如果没有项目未指定高度或设置为auto,则项目会占满整个容器的高度,可设置的值如下:

  • stretch:默认值,如果没有项目未指定高度或设置为auto,则项目会占满整个容器的高度,下面图示中项目 1 就未指定高度,其余项目都指定了高度
    就未指定高度
  • flex-start:设置与交叉轴的起点对齐
  • flex-end:设置与交叉轴的结束点对齐
  • center:设置与交叉轴的重点对齐
  • baseline:设置项目与项目中第一行文字基线对齐

6. align-content:设置多根轴线的对齐方式,如果只有一个轴则该属性不生效,可设置的属性如下:

  • stretch:默认值,轴线占满整个交叉轴
  • flex-start:设置与与交叉轴的起点对齐
  • flex-end:设置与交叉轴的终点对齐
  • center:设置与交叉轴的中点对齐
  • space-between:设置与交叉轴两端对齐,轴线之间的间隔平均分布
  • space-around:设置每根轴线两侧的间隔都相等,轴线与轴线的间隔是轴线到交叉轴边缘间隔的两倍

flex项目属性

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

2、flex-grow:设置项目的放大比例,默认值为0,如果存在剩余空间也不放大,如下图所示:

3. flex-shrink:设置项目的缩小比例,默认值为 1,如果项目空间不足,则项目将缩小,如下图所示:

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

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

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

发表评论

电子邮件地址不会被公开。 必填项已用*标注