[CSS] Flex/Grid Layout Modules, part 1

万事起头难，只要不起头，就一点都不难了。

在这个充满着 CSS Frameworks 的年代，人人有功练，人人有版切，身为老屁股的我只能在沙滩上晒乾，而且还卖不到钱。

铁人赛就当作自己还有在喘气的证明。

前言

其实写 CSS 框架应该比较多观众，但就一个码农来说，自己动手做会比较有趣一点。而且那些框架实在有点五花八门，就是你去 Google 一些关键字，诸如「超好用」「XX 天就上手」「20XX 热门框架」然後就会跑出一堆。

我没有阻止你用，只要能赚钱的框架就是好框架。

君不见 jQuery 的 $ 还是屹立不摇。

不过 jQuery 有点离题了就是。

目前 w3c 对於 Flexbox, Grid 这两件事情算是有认真在更新。虽然说 Grid 已经 CR 不过又挂上 Draft，该吵的东西也还没有结论（例如 subgrid 会推迟到 Level 2 才可能会推出 #Issue958）。

Grid 从 2016 年 CR 至今也 5 个年头了，基本上在 Caniuse 上面也呈现出不错的支援度。热门的 TailwindCSS 基本上也有采用 Grid 来做排版，至於怎麽用不要来问我，我没有很熟（哈）。

Flexbox 就不用再多说，我在 2012 年看他 CR 後，又到了 2016 才慢慢被推广出来，算起来已经 9 年了。至於说为什麽那麽不红（或是不普及？），可能要去问一下前阵子才入土的 IE 吧。

至於所搭配的 Media Query 会在系列中提及，会顺便讲一点，不会着墨太多。

目录

1. Flexbox 基本介绍
   • [CSS] Flex/Grid Layout Modules, part 1
     • Flexbox
     • 基本介绍
     • Flex 容器
       • 样式设定
       • 轴方向
     • Flex 元件
       • 样式设定
       • flex-basis 的魔术
       • align-self
       • order
2. Flexbox 能与不能
   • [CSS] Flex/Grid Layout Modules, part 2
     • 留白与断行
     • 不如预期的部分
   • [CSS] Flex/Grid Layout Modules, part 3
     • Flex 的轴流向与留白
     • Flexbox 巢状结构
     • 关於对齐
3. Flexbox 与 Media Query
   • [CSS] Flex/Grid Layout Modules, part 4
     • Flexbox 与 Media Query
     • 关於 column 方向
4. Flexbox 其他相关资讯
   • [CSS] Flex/Grid Layout Modules, part 5
     • 容器计算
     • 尺寸干扰
     • 零尺寸元件
     • 关於 gap
5. Grid 基本介绍
   • [CSS] Flex/Grid Layout Modules, part 6
     • Grid 基本介绍
     • Grid 容器
     • 容器尺寸与限制
     • 容器样式
       • 轨迹清单
       • grid-template-areas 的字串定义
       • 隐性网格
       • 网格单元顺序
     • 对齐与间隔
   • [CSS] Flex/Grid Layout Modules, part 7
     • 新的单位 fr
     • 容器对齐与定位
   • [CSS] Flex/Grid Layout Modules, part 8
     • 网格格线
       • 隐性格线 The Implicit Grid
       • 使用命名格线与隐性格线的雷
   • [CSS] Flex/Grid Layout Modules, part 9
     • 容器中的隐性轨道设定
     • 轨道尺寸详解
       • fit-content(limit)
       • minmax(min, max)
     • 容器单元流向
     • 容器单元的填满
   • [CSS] Flex/Grid Layout Modules, part 10
     • 间隔、间隔、间隔
     • 最後的对齐
   • [CSS] Flex/Grid Layout Modules, part 11
     • Grid 单元
     • 尺寸
       • 可替换元件的尺寸
       • 无尺寸限制方向的魔性
     • 对齐的基本操作
   • [CSS] Flex/Grid Layout Modules, part 12
     • 单元与格线
     • 指定轨道区域名称
     • 指定 <轨道格线>
       • <数字> <自订轨道名称>
       • span [<数字>, <自订轨道名称>]
     • 关於 auto 与 Grid 单元轨道重叠
       • 官方没有写的例外
   • [CSS] Flex/Grid Layout Modules, part 13
     • 填满（stretch）与留白（margin）
     • 列方向轨道定位问题
   • [CSS] Flex/Grid Layout Modules, part 14
     • 单元的对齐
     • 对齐的权重顺序
     • 超出格线
6. Grid 能与不能
7. Grid 与 Media Query
8. Grid 演算机制
9. Grid 与 Flexbox 比较
10. Grid / Flexbox 混合应用
11. Grid 进阶与新功能
12. Grid 在浏览器上的各种差异
13. 那些跟 Grid 相关的 CSS 样式设定
14. 那些关於 Level 2 的事情

以上这些，其实就把超长篇幅的文章然後分割成 30 份这样吧（哈）。

其实我不知道 Flexbox 还有谁想看？

这年头好像用框架比较快，谁理你背後的原理是什麽呢？

Flexbox

我们先来看看可使用状况。基本上除了 IE 以外，是不用担心使用上的问题。

Flexbox 的基本盘是对应从 CSS2.1 以来的四种编排模式，

1. 区块（block）
2. 行内（inline, inline block）
3. 表格资料（table, 或各种资料集设计）
4. 定位区块（使用 position 的各种变化）

虽然是这样讲，不过这就跟当年 CSS1/2/2.1 开始流行後，从 <table> 慢慢转向 <div> 後，接着到了 HTML5 开始讲语意化。出了一些很奇妙的事情，

1. <table> 退流行了所以我都用 <div> 很潮～
2. <div> 就用 position 神马都可以排，超 DUE 的～
3. float 简直凌波微步，我得意的飘～
4. HTML5 说要语意化，用 <div> 简直罪恶！

其他的就不提了，我只想说，为了语意化而语意化真的挺恶心的。

基本介绍

Flexbox 区块元件主要构成如下，

1. Flex 容器（Container）
2. Flex 元件（Items）
3. 容器尺寸（通常我们叫做 宽度）
4. 交叉轴尺寸（通常我们叫做 高度）
5. 容器主轴/交叉轴（依据排列方式决定哪一个方向为主轴)

如果你把 Flex 容器主轴方向设定为 column 的时候，上图的主要轴、交叉轴就会交换。

Flex 容器

设定容器我们可以使用 display 来达成，容器可以设定成两种，

1. display: flex 亦即使用区块（Box Level）来设定容器。
2. display: inline-flex 亦即使用行内（Inline Level）来设定容器。

无轮你设定的是哪一种，需要留意 Flex 容器会忽略以下特性，

1. float, clear 会被忽略。
2. vertical-align 无法应用在 Flex 元件上。
3. ::first-line, ::first-letter 这两个拟似元件无法套用至容器上。

倘若元素指定 display: inline-flex 的话，在计算样式值（Computed Value）会呈现 flex 而不是 inline-flex，这一点请留意。

样式设定

在容器当中，以下列举常用的样式设定，

容器主要轴、交叉轴会因为方向性的不同而交换，其下属性所适用的方向也会不同。

另，轴方向也会因为 writing-mode 的影响而有不一样的呈现，关於 Write Mode 可以参考 w3c 上面的说明（CSS Writing Modes Level 4）。

容器中对於影响元件的属性有这些，

需要留意的是 align-content 只能适用在多行的 Flex 容器当中，在预设的容器设定中使属於单行 Flex 容器，套用这个样式是无效的设定。

轴方向

容器些样式设定会因为轴方向性的不同而应用在不同的方向上（会跟着轴转动）。请留意一个点，轴方向并不总是内容流向，我所举的例子都是以惯用方向为主（由左至右，由上到下）。

举个例子来说，

另外关於 align-content 则是在多行容器中才会套用到这个样式。所谓的 多行 的意思即是 wrap 的情况下，产生超过一行的 Flex 元件时，该样式就会被套用。

请留意 column 这个方向在没有容器尺寸的情况下，无法产生 wrap 的效果，亦即并无 多行 的情况存在，且关於 wrap 的相关样式也会失效。

举一个套用 wrap 产生多行 Flex 容器的例子，

跟其他两个样式相同，当轴方向转动时，align-content 也会跟着轴转动，亦即应用的方向会不同。

Flex 元件

任何被 Flex 容器所包含的第一层子元件，都会被转成 Flex 元件，而自身属性会转换成 Flex 格式内容（Flex formatting context），可以当作一般区块元件看待，但实际上并不是（Like Box Model, bot NOT.）。如同上述所说，这些元件并无法使用 float 尔等设定，这一点需特别留意。另外，假设这些元件被定义了静态定位（position 为 static, absolute）时，该元件就不属於 Flex 容器预设的主轴流向，会跳脱任何关於 Flex 容器所带来的影响。

元件自身也可以使用 display: flex 来将自己转变成容器，这样的作法在需要复杂结构时，可以自由变化使用。

样式设定

Flex 元件有以下样式可以使用，

其中 flex 除了 none 外，还有几个关键字可以使用，

flex, flex-grow, flex-shrink, flex-basis

在绝大多数的 CSS 框架中，我们比较常见的设定大多都是这些组合，

flex: 0 1 auto;
// 或
flex: 1 0 100%;
// 或
flex: 1 0 50%;
max-width: 50%;

然後就没有然後了。因为人家这样用所以你就跟着这样用，至於为什麽要这样用好像也不是挺重要的事情。

没关系，我们就来看看到底发生了什麽事情？

flex-grow 计算方式，可以依照此公式来计算，

剩余空间 x <flex-grow> / sum(<flex-grow>)

剩余空间怎麽来的呢？

容器空间 - sum(<flex-basis>||<width>)

但是，

当你的 flex-grow 总和小於 1 的时候，事情就不是这样了。在所有 Flex 元件的 flex-grow 总和小於 1 时，该总和会直接当作 1 来使用。换句话说，上面的公式会变成，

剩余空间 x <flex-grow> / 1

这样计算下来，容器就可能会有剩余空间没有分配的情况。

另外，当你的 flex-grow 有搭配 max-width 使用时，所计算出来的元件若大於 max-width，则会优先取用 max-width 的设定值来使用，计算出来的填满尺寸将会被忽略。这也是造成容器没有被填满的另外一个原因。

flex-shrink 计算方式，可以依照此公式来计算，

溢出空间 x <flex-shrink> * <width>) / sum(<flex-shrink> * <width>)

溢出空间的计算方式为（注意，这为负值），

容器空间 - sum(<flex-basis>||<width>)

与 flex-grow 雷同，当你的 flex-shrink 总和小於 1 的时候，他并不会拿所有的溢出空间来计算，你的真实的溢出空间要先经过这样的计算，

溢出空间 x sum(<flex-shrink>) / 1

算出新的溢出空间之後，才回头套用上面的公式去计算。

flex-basis 的魔术

特别把这件事情拿出来讲的原因，是因为他跟 width 实在有说不清的爱恨纠葛。如同上述提及了一些优先权的事情，这边给一个比较清楚的比较表，

基本上，只要 flex-basis 不是使用关键字 auto, content 的情况下，优先权一律覆盖 width 的设定。但是，这个数值设定会受到 max-width 的影响而有所不同。

align-self

这个 Flex 元件属性有一个 必要条件，倘若以 row 为主轴方向，你的容器必须要有交叉轴的尺寸设定，不然这个属性是无法有效呈现的。

order

故名思义就是 Flex 元件顺序的设定，但请留意，如果你的元件使用了静态定位设定（position 为 static, absolute）时，因为元件会跳脱 Flex 主轴流向，所以此时的顺序设定会失效。

Flex 元件会有一个隐性的定义，在 order 样式混用的情况下，没有设定 order 样式的 Flex 元件，会带有一个 order: 0 的效果。所以，若你在多个元件使用 order 时，请务必确认每个元件都有设定你想要的 order 样式。

举例来说，

<div class="flex">
    <div class="item item-1"></div>
    <div class="item item-2"></div>
    <div class="item item-3"></div>
</div>

.flex {
    display: flex;
    flex-flow: row;
}

.item {
    flex: 1 0 33.333333%;
    max-width: 33.333333%;
}

.item-1 {
    order: 1;
}

.item-2 {
    order: 3;
}

.item-3 {
    order: 2;
}

最终呈现的结果如图，

有一点请留意，如果你的轴方向是反向（row-reverse 或 column-reverse）的话，顺序的设定也会反过来。

小记

以上这些是 Flexbox 的基本概念介绍，其实讲起来并没有很多艰深的东西，真正比较枯燥乏味的会再後面继续介绍，如果不想理解 Flexbox 的演算机制的可以跳过没关系（笑）。

本篇内容理论上可以应付五成以上的容器设定。为什麽只有五成？因为我还有 留白 的部分没有讲到，那些算一算大概是剩下的四成五左右。

下一篇会着墨於那个四成五，至於剩下的 5% 就放最後吧，反正都是一些很硬的演算机制。

同步放送：

[CSS] Flex/Grid Layout Modules, part 0
[CSS] Flex/Grid Layout Modules, part 1