CSS之深入理解 flex 布局以及计算

起因：对于Flex布局，阅读了大漠老师和其他老师写的文章后，我还是不太理解Flexbox是如何弹性的计算子级项目的大小以及一些其他细节。在大漠老师的帮助下，我去查阅Flexbox 的 W3C 规范文档

1. 对于flex盒模型的设计期望：

- 在任何流动的方向上(包括上下左右)都能进行良好的布局

- 可以以逆序 或者 以任意顺序排列布局

- 可以线性的沿着主轴一字排开 或者 沿着侧轴换行排列

- 可以弹性的在任意的容器中伸缩大小（今天重点研究的主题）

- 可以使子元素们在容器主轴方向上 或者 在容器侧轴方向上 进行对齐

- 可以动态的 沿着主轴方向 伸缩子级的尺寸，与此同时保证父级侧轴方向上的尺寸

2. 主轴和侧轴

首先每一根轴都包括 三个东西：维度、方向、尺寸

- 所谓的维度实际上就是意思就是子元素 横着排还是竖着排(x 轴 或 y 轴）

- 方向 即排列子元素的顺序 顺序还是逆序

- 尺寸 即width[height] ： 每一个子元素在主轴方向所占的位置的总和 如果主轴是水平的，那么尺寸就是父元素内所有item的outerWidth总和,如果主轴是垂直的，那么尺寸就是父元素的outerHeight

主轴是依靠 flex-direction 和 所有子元素在主轴方向上的item-size的总和确定的，flex-direction这个属性可以控制子元素的排列方向和排列顺序

侧轴是依靠 flex-wrap 和 所有子元素在主轴方向上的item-size的总和确定的，flex-wrap 可以控制子元素 在侧轴方向上的排列方式以及顺序

而关于不同种类不同情况下的 item-size 我们会在下面讨论，现在您可以简单将它理解为width[height]

为了方便 flex-direction + flex-wrap 合并成了一个属性 flex-flow

通过这个简单而复杂的属性，我们就能够控制所有子元素的水平和垂直方向，逆序排列和顺序，换行和不换行

主侧轴的切换十分简单，当主轴设定的时候，它的垂直面，就默认被设定成了侧轴

这条CSS属性能够告诉我们那些信息？

- 子元素是横着排列的，主轴是水平的横轴，侧轴是竖直的纵轴

- 子元素是逆序并沿着主轴排列的，从右到左

- 子元素是换行的

- 子元素是逆序并沿着侧轴排列的，从下到上

3. FFC (flex formatting context)

Flexbox 布局新定义了格式化上下文，类似 BFC（block formatting context）。有多类似呢？ 就是除了布局和一些细节不同以外的一切规则都和 BFC 是相同的

例如，设置了 display: flex; 或 display: inline-flex的元素，和BFC一样，不会被浮动的元素遮盖，不会垂直外边距坍塌等等

而对于设置了 display: inline-flex 的盒子来说，我们可以类比 display: inline-box;行理解。即 一个被行列化后的 Flexbox。它不会独占一行，但是可以设置宽和高

4. 与BFC的细微区别

- Flexbox 不支持 ::first-line 和 ::first-letter 这两种伪元素

- vertical-align 对 Flexbox 中的子元素 是没有效果的

- float 和 clear 属性对 Flexbox 中的子元素是没有效果的，也不会使子元素脱离文档流(但是对Flexbox本身是有效果的！)

- 多栏布局（column-*） 在 Flexbox 中也是失效的，就是说我们不能使用多栏布局在Flexbox 排列其下的子元素（鱼和熊掌不可得兼嘛）

- Flexbox 下的子元素不会继承父级容器的宽

5. flex item（flex 子元素）

CSS解析器会把定义了 display: flex 和 display: inline-flex 的 Flexbox 下的子元素整体装进一个看不见的盒子(这个盒子也就是 flex item )里，我们通过排列这些盒子来达到排序、布局、 伸缩的目的

规范中把这种盒子称为 flex item，而子元素中包括了标签节点以及文本节点。标签节点很容易理解，需要注意的是文本节点(Flexbox的所有子元素自动成为容器成员，称为Flex项目（flex item），简称”项目”。 )

默认情况下，flex 会将连续的文本节点装进 flex-item 之中，使文本可以和标签节点一起排序和定位

值得注意的是，空格也是文本节点，所以 white-space 会影响Flexbox 中的布局

使用white-space属性之后，flexbox会将空格也算成字符，包裹进flex item内

6. flex-item-size 如何计算的

item-size（尺寸）为主轴方向上item的content再加上自身的margin 、 border 和 padding 就是这个item的尺寸

6.1 flex-basis 的优先级比 width[height]: 非auto; 高

如果子元素没有内容和默认固定宽高，且设置了flex-basis。flex-item content以flex-basis来决定，无论width[height] 设置了多少，(可理解为 flex-basis 比 width[height]: 非auto 的优先级高)

这里div的内容为空，则使用flex-basis设定的宽高

如果子元素没有内容和默认固定宽高，那flex-basis的优先级比width[height]高，无论width[height]设置多少，flex-item content都以flex-basis来决定

6.2 元素存在默认宽高

如果子元素有默认固定宽高（例如input标签在页面中会有一个默认的宽和高）、并且设置了flex-basis，那么它的content以固定宽高为min-width/height，如果flex-basis 超过了固定宽高，那么flex-basis则成为其 content，如果flex-basis比固定宽高小，那么以固定宽高为 content

6.3 元素存在 min-width[height] 或者 max-width[height]

如果flex-item有min-width[min-height]的限制，那么flex-item content按照min-width值为下限，如果flex-basis的值大于min-width[min-height]那么flex-item content以flex-basis计算

如果flex-basis的值小于min-width[min-height]那么flex-item content以min-width[min-height]计算

显然，1号item设置的600px大于300px所以沿用了600px的宽，而2号的100px宽小于300px，所以使用的是300px的min-width

如果 min-width[min-height] 的值已经超出了容器的尺寸，那么即使设置了 flex-shrink。 CSS解析器也不会进行将这个item的 content 缩放，而是坚持保留它的min-width[min-height]

可见如果Flexbox设置的min-width超出了 flex container 的范围，也不会对其进行压缩

反之，如果设置了 max-width[height] 的值，那么设置flex-basis无法超过这个值，对于 flex-grow 也仅仅只会增长到 max-width[height] 这个上限，而并不会超过它

7. width[height]: auto 优先级等于 flex-basis

前面提到，如果给item同时设置了 width[height] 和 flex-basis 的话。flex-item content以flex-basis来决定。但是实际上默认的 width[height]: auto优先级是等于 flex-basis 的

CSS解析器对比两者的值，两者谁大取谁作为item的基本尺寸，如果一个item没有内容，那么auto可能为空，所以flex-item content就会以flex-basis来决定

但是如果item有了内容，且内容撑开的尺寸比flex-basis大，那么flex-item content就会根据width[height]: auto来决定，且无法被缩放。反之，如果比flex-basis小，flex-item content就会以flex-basis来决定

width: auto时当内容长度比 flex-basis 大，则 flex-item content以内容长度来决定，且无法shrink

如果 flex-basis 的长度大于文字内容长度，那么flex-item content以 flex-basis 来决定

同时设置了flex-basis: 800px; 和 width: 1px; flex-item content以 flex-basis 来决定，可以发生shrink

注意2号盒子我设置了 flex-shrink: 1; 1号盒子和3号盒子我设置了 flex-shrink: 0; 意思就是我将所有的需要shrink的空间都压到了2号盒子上，总共的需要 shrink的空间为 0 * 600 + 1 * 20 + 0 * 100 = -20；而2号盒子只有20的空间，理应被完全shrink变为0，但是值得注意的是2号盒子并没有被完全 shrink，还保留了一个文字的距离

除此之外，overflow: hidden; 也会影响

文字长度在 600px; 小于 flex-basis: 700px，所以flex-item content以flex-basis来决定，可以shrink

8. 隐藏属性对 items-size 的影响

我针对了 display: none; visibility: hidden; visibility: collapse; transform: scale; 等属性对 items 进行测试

结果如下：

- 如果设置了 visibility: hidden; | visibility: collapse; | transform: scale;的flex-item content 依然被算进主轴尺寸，CSS 解析器依然会根据他们的 flex-grow | flex-shrink 将可用空间 或者 负可用空间 分配给他们

- 如果设置了display: none; CSS解析器不会对该item的空间进行计算，也不会对其grow空间

9. 关于position: absolute 对item影响

position: absolute 也是适用 Flexbox 中的子元素的，并且设置了position: absolute属性的子元素，也会受到 Flexbox 排列的影响

设置了absolute 的子元素重叠在了一起，但是依然会受到 align-items: center; 的影响而居中。对于 Flexbox 本身来说，设置了position: absolute并不会对其下的子元素产生任何影响

我们重点看 Flexbox 下的子元素设置了 absolute 后有什么结果

根据我做的实验，我得到了如下的结论：

flexbox 下设置了absolute的子元素的位置受3个方面的影响：

- flexbox 流下面的 justify-content(主轴上对齐方式) 和 align-items(交叉轴上对齐方式)

- 单个子元素的 top、left、right、bottom

- 单个子元素的 margin

设置了absolute 的 item 不会影响布局,如图其中1 2 3 4 5 号是设置了absolute的item,而 6 7 8 9号是没有设置absolute的item Flexbox 我设置了 justify-content: center; 和 align-items: center; 每一个item我都给了 margin: 20px

#