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一致。
网友评论