【Flex布局】微信小程序flex布局

Flex是Flex Box的缩写，“弹性布局”，非常强大，用来为盒装模型提供最大的灵活性。

任何一个容器都可以指定为Flex布局。

比如：

在小程序中所有的视图容器都可以指定为视图布局。什么是视图容器，见微信小程序开发文档https://developers.weixin.qq.com/miniprogram/dev/component/

 

主要用到的容器属性：

1.flex-direction，布局走向

• row(默认值)，主轴为水平方向，起点在左端。
• row-reverse，主轴为水平方向，起点在右端。
• column，主轴为垂直方向，起点在上沿。
• column-reverse：主轴为垂直方向，起点在下沿。

2.flex-wrap，是否换行

• nowrap(默认值)，不换行，会压缩/撑开。
• wrap：换行。
• wrap-reverse，相反方向。

3.justify-content，在主轴上的对齐方式

• flex-start(默认值)，左对齐。
• flex-end，右对齐。
• center，居中。
• space-between，两端对齐，项目之间的间隔相等。
• space-around，每个项目两侧的间隔相等，所以项目之间的间隔比项目与边框的间隔大一倍。
• 

4.align-items，在交叉轴上的对齐方式

• flex-start，交叉轴的起点对齐。
• flex-end，交叉轴的终点对齐。
• center，居中。
• baseline，项目的第一行文字的基线对齐。
• stretch(默认值)，如果项目未设置高度或设为auto，将沾满整个容器的高度。
• 

 

项目(容器子元素的属性)

1. order

定义项目的排列顺序，数值越小越靠前，默认为0；

2. flex

占据控件的比例，默认为none。

3. align-self

允许单个项目与其他项目不一样的对齐方式，可覆盖align-items属性。默认值为auto，表示集成align-items属性，如果没有父元素，则等同于stretch。