flex项目深入分析

FFC (flex formatting context)

• Flexbox 布局新定义了格式化上下文，类似 BFC（block formatting context）
• 注意 : 我所指的Flexbox 是指设置了 display: flex; 或 display: inline-flex;的盒子。不是指单单设置了 display: flex; 的盒子。
• 例如，设置了 display: flex; 或 display: inline-flex的元素，和BFC一样，不会被浮动的元素遮盖，不会垂直外边距坍塌等等。

与BFC的细微区别

但需要注意的是以下几点细节，Flexbox 布局 和 Block 布局是有细微区别的

Flex box（父元素）

1. Flexbox 不支持 ::first-line 和 ::first-letter 这两种伪元素
2. vertical-align 对 Flexbox 中的子元素 是没有效果的
3. float 和 clear 属性对 Flexbox 中的子元素是没有效果的，也不会使子元素脱离文档流(但是对Flexbox 是有效果的！)

flex item（flex 子元素）

1. 多栏布局（column-*） 在 Flexbox 中也是失效的，就是说我们不能使用多栏布局在Flexbox 排列其下的子元素（鱼和熊掌不可得兼嘛）
2. Flexbox 下的子元素不会继承父级容器的宽

flex项目盒子介绍

1. CSS解析器会把 定义了 display: flex; 和 display: inline-flex; 的 Flexbox 下的子元素外部装进一个看不见的盒子里，我们通过排列这些盒子来达到排序、布局、 伸缩的目的。

• 规范中把这种盒子 称为 flex item，而子元素中包括了 标签节点 以及 文本节点。标签节点很容易理解，需要注意的是文本节点。
• 默认情况下，flex 会将 连续的文本节点 装进 flex-item 之中，使文本可以和标签节点一起排序和定位。
• 值得注意的是，空格也是文本节点，所以 white-space 会影响Flexbox 中的布局，比如设置了white-space: pre 的Flexbox

flex-item-size 如何计算的

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

位置

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

• justify-content | align-items > top、left、right、bottom=margin（优先级排序）
• 对于 Flexbox 来说，设置了position: absolute;并不会对其下的子元素产生任何影响。

image.png

• 1、2、3、5受topleftbottomright影响，4受justify-content、align-items和margin影响，6、7、8、9只受justify-content、align-items

宽或高

三种情况

1. flex-basis > width[height]: 非auto（没有元素默认值和内容）; （优先级）
2. width:auto、width:非auto和flex-basic（优先级比较）
   • width:auto < flex-basis值
   • width:auto < flex-basis（优先级）
   • width:auto > flex-basis值
   • width:auto > flex-basis（优先级）
   • width:非auto < flex-basis（优先级）
3. min-width[height]、max-width[height]、flex-basis和flex container（父元素容器尺寸）（优先级比较）

   min-width[min-height]

   • flex-basis > min-width[min-height] 值
   • flex-basis > min-width[min-height]（优先级）
   • flex-basis < min-width[min-height] 值
   • flex-basis < min-width[min-height]（优先级）

flex container

• min-width[min-height] > flex container 值
• min-width[min-height] > flex container（优先级）

max-width[height]

• Flex-basis < max-width[height] 值
• Flex-basis < max-width[height]（优先级）--通过flex-grow伸展开。

总结：

1. width:auto、width:非auto、flex、min-width[min-height]、max-width[height]和flex-basis两两比较时取最大值
2. width:非auto 和 flex-basis（优先级）同时设置时，width:非auto < flex-basis（优先级）

伸展和坍塌

这要分两种情况，换行或者不换行。

1. 如果 flex-wrap: nowrap; 即不换行。

1. Flex-item总和 < flex-box时

• flex-grow计算流程是：
• 可用空间 = flexbox-content - 每个item-size的总和
• 单位分配空间 = 可用空间 / grow
• 每个item延伸的尺寸 = 单位分配空间 * 对应的item grow

  注意：flex-shrink 的计算流程和flex-grow的计算流程不同。

2. Flex-item总和 > flex-box时

• flex-shrink计算流程是：
• 加权和（flex-shrink） = flex-shrink * item-size
• 每个item的shrink比例 = 每个item的flex-shrink * item-size / 加权和
• 超出空间 = Flex-item（所有子项目之和） - flex-box（flex盒子尺寸）
• 每个item坍塌后的尺寸 = flex-basis - 超出空间 * 每个item的shrink比例

1. flex-wrap: wrap[wrap-reverse]; 即换行

items 都会先在主轴方向上的多条线上排列，每条线之间互不干扰

1. grow、max-width[height] 情况下 flex-grow 的计算流程

• 第一次分配
• 剩余空间 = flex-box - 统计带max-width[height]属性的item-size之和
• 有剩余空间则再分配
• 每个item最终尺寸 = item的flex-basis + 剩余空间*每个item的flex-grow / 所以的item的flex-grow之和

2. min-width[height] 情况下 flex-shrink 的计算流程

• 第一次坍塌
• 按正常的flex-shrink 的计算流程，计算出每个item坍塌后的尺寸
• item没有坍塌的尺寸 = 带min-width[height]属性的item-size - item坍塌后的尺寸
• item最终尺寸 = 每个没有带min-width[height]属性的item坍塌后的尺寸 - 每个item的flex-shrink（item没有坍塌的尺寸 / item的flex-shrink之和）

隐藏属性对 items-size 的影响

display: none、visibility: hidden、visibility: collapse和transform: scale;

• visibility: hidden; | visibility: collapse; | transform: scale;的flex-item content 依然被算进主轴尺寸
• display: none; CSS解析器不会对该item的空间进行计算

参考

深入理解 flex 布局以及计算