微信小程序 - flex布局

1. 概念

flex布局（Flexible布局，弹性布局）是在小程序开发中经常用的布局方式。学习小程序必须先弄清楚其相关特性，可以在开发中更加顺手。

---

2. 基础知识

(1) 简介

• 开启了flex布局的元素叫flex container；
• flex container里面的直接子元素叫做flex items；
• 设置display属性为flex或者inline-flex可以成为flex container；
  flex：flex container以block-level形式存在；
  inline-flex：flex container以inline-flex形式存在。

flex布局的思维导图如下：

flex布局

---

(2) flex布局模型

flex布局模型

flex items默认都是沿着main axis(主轴)从main start开始往main end方向排布。

---

(3) 应用在flex-container上的CSS属性

1> flex-direction：设置主轴的方向

flex-direction有四种：

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

cross axis的方向只会向下或者向右。

row

row-reverse

column

column-reverse

2> flex-wrap：设置是否换行

flex-wrap有三种：

• nowrap(默认)：单行；
• wrap：多行；
• wrap-reverse：多行(较之wrap，cross start与cross end相反)。

nowrap

wrap

wrap-reverse

3> flex-flow：是flex-direction || flex-wrap的简写

4> justify-content：设置flex items在主轴上的对齐方式

flex-direction有六种：

• flex-start(默认值)：与main start对齐；
• flex-end：与main end对齐；
• center：居中对齐；
• space-between：
  flex items之间的距离相等；
  与main start、main end两端对齐。
• space-around：
  flex items之间的距离相等；
  flex items与main start、main end之间的距离 等于flex items之间的距离的一半。
• space-evenly：
  flex items之间的距离相等；
  flex items与main start、main end之间的距离 等于flex items之间的距离。

justify-content

5> align-items：设置flex items在交叉轴上的对齐方式（针对单行）

align-items有五种：

• stretch(默认值)：当flex items在交叉轴上的size为auto时，会自动拉伸至填充flex container；
• flex-start：与cross start对齐；
• flex-end：与cross end对齐；
• center：居中对齐；
• baseline：与基准线对齐；

align-items

6> align-content：设置flex items在交叉轴上的对齐方式（针对多行）

align-content有七种：

• stretch(默认值)：与align-items的stretch类似；
• flex-start：与cross start对齐；
• flex-end：与cross end对齐；
• center：居中对齐；
• space-between：
  flex items之间的距离相等；
  与cross start、cross end两端对齐。
• space-around：
  flex items之间的距离相等；
  flex items与cross start、cross end之间的距离 等于flex items之间的距离的一半。
• space-evenly：
  flex items之间的距离相等；
  flex items与cross start、cross end之间的距离 等于flex items之间的距离。

align-content

---

(4) 应用在flex-items上的CSS属性

1> flex-grow：设置flex items在主轴方向上如何扩展

• 可以设置任意非负数(正整数、正小数、0)，默认值为0；
• 如果所有items的flex-grow之和<1，那么items并不能 扩展 到刚好填充container。

2> flex-shrink：设置flex items在主轴方向上如何收缩

• 可以设置任意非负数(正整数、正小数、0)，默认值为1；
• 如果所有items的flex-shrink之和<1，那么items并不能 收缩 到刚好在container之内。

3> flex-basis：设置flex items在主轴方向上的base size

• auto(默认值)：自适应；
• content：取决于内容本身的size。

决定flex items最终base size的因素，从优先级高到底：

• max-width/max-height/min-width/min-height
• flex-basis
• width/height
• 内容本身的size

4> flex：是flex-grow flex-shrink? || flex-basis的简写

• 默认值是 0 1 auto；
• none：0 0 auto。

5> order：设置flex items的排布顺序

• 可以设置任意整数(正整数、负整数、0)；
• 默认值为0，值越小就越排在前面。

6> align-self：允许flex items覆盖flex container设置的align-items

• auto(默认值)：遵从flex container的align-items设置；
• 默认值为0，值越小就越排在前面。
• stretch、flex-start、flex-end、center、baseline，效果与align-items一致。