flex布局全解析

Posted 2023-03-09

参考技术A

很长一段时间, 我知道有 flex 这个布局方式, 但是始终没有去学它. 3点原因:

最近由于开发需要, 学习了下WeUI的实现 , 发现里面大量使用了 flex 布局, 于是决定学习一下.

Flexbox Layout , 官方名为 CSS Flexible Box Layout Module , 意为"弹性布局", 是CSS3中引入的一种更加灵活高效的布局/对齐/排序方式(还有一种更适合大型布局的 网格布局 CSS Grid Layout Module ). flex 是 flexible 的缩写.

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

行内元素也可以使用flex布局。

采用flex布局的元素被称为 flex容器 (flex container) , 它的子元素即为 flex元素 (flex item) .

flex容器中包含两个相互垂直的轴, 即 主轴 (main axis) 和 副轴 (cross axis) .

flex元素沿主轴从 主轴起点 (main start) 到 主轴终点 (main end) 依次排布.

如果flex容器包含多行flex元素, 则 flex行 (flex lines) 沿副轴从 副轴起点 (cross start) 到 副轴终点 (cross end) 依次排布.

单个flex元素占据的主轴空间叫做 主轴长度 (main size) , 占据的副轴空间叫做 副轴长度 (cross size) .

Getting Dicey With Flexbox 中提到:

前一段时间同事做过 video 相关的开发, 踩到各种坑, 因此我知道 video 的支持不那么好, 特别是在android上. 让我惊奇的是 flex 竟然比 video 的支持更好?

从 CanIUse 的数据来看, flex 的支持度是: 82.65% (支持) + 14.17% (部分支持) = 96.81% , 而 video 的支持度是: 92.48% . 浏览器对 flex 的支持好像并没有特别好...

但是有微信的WeUI使用了 flex 布局, 我觉得在移动端 flex 应该还是支持度比较高的.

所以, 如果你是做移动端开发的, 可以优先考虑 flex .

下面就开始介绍与 flex 布局相关的属性. 以作用对象分为两组, 第一组作用于flex容器, 第二组作用于flex元素.

注意: 以下属性值都可以有 initial (该属性的默认值)和 inherit (继承自父元素), 本处省略.

这类属性有6种, 分别为:

注意:

注意: row 和 row-reverse 受到了 direction 属性(默认值为 ltr , 可改为 rtl )的影响.

注意: 此属性只在flex容器中有 多行 flex元素时才有作用.

这类属性有6种, 分别为:

注意: flex元素的 float , clear 和 vertical-align 会失效.

当flex元素有父元素时, 它的 align-self: auto 即为父元素的 align-items 属性; 否则(无父元素时), 相当于 stretch .

当有剩余空间时, flex元素会根据 flex-grow 按比例分配剩余空间.

默认值 0 代表, 即使有剩余空间, 该flex元素也不放大.

当flex容器空间不足时, flex元素会根据 flex-shrink 按比例缩小.

flex-shrink 为 0 则表示, 即使flex容器空间不足, 该flex元素也不缩小.

flex-basis 定义了分配剩余空间之前flex元素的初始大小, 可为长度值(如 20% , 5rem 等)或 auto 等关键词.

flex-basis: auto 表示, 以 flex元素的主轴长度 为 flex-basis . 若flex元素的主轴长度也是 auto , 则以flex元素内容(即所有子元素)的大小为 flex-basis .

除了 auto 还有 content , max-content , min-content 和 fit-content 关键词, 但是现在浏览器对它们的支持太少, 可以忽略.

(敲黑板) 同学们注意, 这里是重点!

这里的 可选值 我参照了 W3C flexbox 的写法. 其中:

举例来说, a | [ b || c ] 包含的可能情况有 a , b , c , b c , c b .

现在回过头来再看 none | [ <‘flex-grow’> <‘flex-shrink’>? || <‘flex-basis’> ] 就清晰多了.

注意, none 是一个特殊值, 相当于 0 0 auto .

另外, 如果 flex 中不指定:

注意: flex 的初始值是 0 1 auto , 即由每个 flex 因子本身的默认值组成(比方说 flex-grow 的默认值就是 0 ).

但是 , 如果利用 flex 设置了至少一个 flex 因子, 那么没被设置的那些 flex 因子的默认值(按grow, shrink, basis的顺序)分别是 1 1 0 .

我来举几个栗子.

W3C建议使用简写形式 flex , 因为它可以方便地应对下面4种 常见情况 .

自此, 我们已经知道了 flex-grow , flex-shrink 和 flex-basis 的作用. 根据这三个值, 计算flex元素的大小只需三步:

第一步: 计算元素的 flex-basis , 有两种情况: 1. 具体的长度值, 或, 2. auto (即flex元素的大小). (这里忽略了 content 等目前支持还不完善的关键词).

第二步: 计算剩余空间, 即 剩余空间 = flex容器的内部空间 - flex元素flex-basis值的总和 .

第三步: 按照 flex 因子(放大时为 flex-grow ; 缩小时为 flex-shrink )分配剩余空间到每个元素. flex元素的最终大小 = flex-basis - flex-factor * 剩余空间 .

举个栗子.

假设flex容器的内部空间为 200px , flex元素的大小的总和是 160px . 看起来, 还有 200 - 160 = 40px 的剩余空间, 应该放大flex元素, 是不是? 不一定! 要看它们的 flex-basis 总和.

假设它们的 flex-basis 总和是 300px , 那么剩余空间应该是 300 - 200 = -100px . 此时剩余空间是 负数 , 应该以 flex-shrink 对每个flex元素在 flex-basis 的基础上进行 缩小 .

下例中, 所有flex元素本身的大小为 80px , 元素中为 flex 值.

200px

0 1 auto

0 3 auto

0 1 150px

0 3 150px

125px

75px

你可以看到, 第一行的flex元素因为设置了 flex-basis:auto , 所以它们的 flex-basis 就相当于元素大小, 即 80px , 即 flex-basis 总和为 160px , 不足容器的 200px 空间, 此时应该放大元素. 但又由于元素的 flex-grow 为 0 , 所以每个元素分配到 0 * 40 = 0px 的剩余空间, 即不放大.

第二行的flex元素设置了 flex-basis:150px , 所以它们的 flex-basis 总和为 300px , 超过了容器的 200px 空间, 故按照 flex-shrink (比例为 1:3 )进行缩小. 由于剩余空间为 -100px , 所以第一个元素应缩小 25px 变成 125px , 第二个元素应缩小 75px 变成 75px .

绝对flex: 从0开始分配空间.

第一行中 flex-basis 为 0 , 表示每个flex元素的初始大小都视为 0 . 此时, 剩余空间就是"flex容器的大小".

相对flex: 从flex元素大小开始分配空间.

第二行中 flex-basis 为 auto , 表示每个flex元素的初始大小都是它本身的大小. 此时, 剩余空间就是"flex容器的大小 - flex元素大小的总和".

呃... flex的东西还是挺多的, 特别是 flex 因子相关的部分, 得花点儿时间理解.

但是, 我相信学flex是值得的, 谁用谁知道!