flex 布局的深入研究

对于flex盒模型的设计期望

flex盒模型是被期望设计成

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

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

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

4：可以弹性的在任意的容器中伸缩大小

5：可以使子元素们在容器主轴方向上或者在容器侧轴方向上进行对齐著作权归作者所有。

6：可以动态的 沿着主轴方向 伸缩子级的尺寸，与此同时保证父级侧轴方向上的尺寸著作权归作者所有。

主轴和侧轴

很有必要先向大家解释清楚 3个问题

什么是主轴？

什么是侧轴？

他们是如何切换的？

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

什么意思呢？

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

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

3：尺寸即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

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

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

flex-flow: row-reverse wrap-reverse;

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

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

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

3：子元素是换行的

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

FFC (flex formatting context)

Flexbox 布局新定义了格式化上下文，类似 BFC（block formatting context）

PS：

注意 : 我所指的Flexbox 是指设置了 display: flex; 或 display: inline-flex;的盒子。不是指单单设置了 display: flex; 的盒子。

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

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

flex item（flex 子元素）

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

规范中把这种盒子称为 flex item，而子元素中包括了标签节点以及文本节点。标签节点很容易理解，需要注意的是文本节点。

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

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

flex-item-size 如何计算的

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

在规范中介绍了 flex-item content 的计算方式

分为以下这几种情况

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

如果子元素没有内容和默认固定宽高，且设置了flex-basis。flex-item content以flex-basis来决定，无论width[height] 设置了多少

2.元素存在默认宽高

如果子元素有默认固定宽高（例如input 标签）、并且设置了 flex-basis，那么它的 content以固定宽高为下限，如果flex-basis 超过了固定宽高，那么flex-basis则成为其 content，如果flex-basis比固定宽高小，那么以固定宽高为 content。

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 计算。

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

min-width[min-height]

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

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