聊聊Flexbox布局中的flex的演算法

到目前为止，Flexbox布局应该是目前最流行的布局方式之一了。而Flexbox布局的最大特点就是让Flex项目可伸缩，也就是让Flex项目的宽度和高度可以自动填充Flex容器剩余的空间或者缩小Flex项目适配Flex容器不足的宽度。而这一切都是依赖于Flexbox属性中的flex属性来完成。一个Flex容器会等比的按照各Flex项目的扩展比率分配Flex容器剩余空间，也会按照收缩比率来缩小各Flex项目，以免Flex项目溢出Flex容器。但其中Flex项目又是如何计算呢？他和扩展比率或收缩比率之间又存在什么关系呢？在这篇文章中我们将一起来探来。
在Flexbox布局中，容器中显示式使用display设置为flex或inline-flex，那么该容器就是Flex容器，而该容器的所有子元素就是Flex项目。
简介

在这篇文章中，我们将要聊的是有关于flex属性的事情，特别是如何使用该属性来计算Flex项目？在开始之前，先来简单的了解一下flex属性。

在Flexbox中，flex属性是flex-grow（扩展比率）、flex-shrink（收缩比率）和flex-basis（伸缩基准）三个属性的简称。这三个属性可以控制一个Flex项目（也有人称为Flex元素），主要表现在以下几个方面：
flex-grow：Flex项目的扩展比率，让Flex项目得到（伸张）多少Flex容器多余的空间（Positive free space）flex-shrink：Flex项目收缩比率，让Flex项目减去Flex容器不足的空间（Negative free space）flex-basis：Flex项目未扩展或收缩之前，它的大小是多少
在Flexbox布局中，只有充分理解了这三个属性才能彻底的掌握Flex项目是如何扩展和收缩的，也才能更彻底的掌握Flexbox布局。因此掌握这三个属性，以及他们之间的计算关系才是掌握Flexbox布局的关键所在。

相关概念

在具体介绍flex相关的技术之前，先对几个概念进行描述，因为理解了这几个概念更有易于大家对后面知识的理解。

主轴长度和主轴长度属性

Flex项目在主轴方向的宽度或高度就是Flex项目的主轴长度，Flex项目的主轴长度属性是width或height属性，具体是哪个属性，将会由主轴方向决定。




剩余空间和不足空间

在Flexbox布局中，Flex容器中包含一个或多个Flex项目（该容器的子元素或子节点）。Flex容器和Flex项目都有其自身的尺寸大小，那么就会有：Flex项目尺寸大小之和大于或小于Flex容器 情景：
当所有Flex项目尺寸大小之和小于Flex容器时，Flex容器就会有多余的空间没有被填充，那么这个空间就被称为Flex容器的剩余空间（Positive Free Space）当所有Flex项目尺寸大小之和大于Flex容器时，Flex容器就没有足够的空间容纳所有Flex项目，那么多出来的这个空间就被称为负空间（Negative Free Space）
举个例子向大家阐述这两个情形：“假设我们有一个容器（Flex容器），显式的给其设置了width为800px，padding为10px，并且box-sizing设置为border-box”。根据CSS的盒模型原理，我们可以知道Flex容器的内宽度（Content盒子的宽度）为800px - 10px * 2 = 780px：







假设Flex容器中包含了四个Flex项目，而且每个Flex项目的width都为100px，那么所有Flex项目的宽度总和则是100px * 4 = 400px（Flex项目没有设置其他任何有关于盒模型的尺寸），那么Flex容器将会有剩余的空间出来，即780px - 400px = 380px。这个380px就是我们所说的Flex容器的剩余空间：







假设把Flex项目的width从100px调到300px，那么所有Flex项目的宽度总和就变成了300px * 4 = 1200px。这个时候Flex项目就溢出了Flex容器，这个溢出的宽度，即1200px - 780px = 420px。这个420px就是我们所说的Flex容器的不足空间：






上面演示的是主轴在x轴方向，如果主轴变成y轴的方向，同样存在上述两种情形，只不过把width变成了height。接下来的内容中，如果没有特殊说明，那么所看见的示例都仅演示主轴在x轴的方向，即flex-direction为row！
min-content 和 max-content

min-content和max-content是CSS中的一个新概念，隶属于CSS Intrinsic and Extrinsic Sizing Specification模块。简单的可以这么理解。

CSS可以给任何一个元素显式的通过width属性指定元素内容区域的宽度，内容区域在元素padding、border和margin里面。该属性也是CSS盒模型众多属性之一。
记住，CSS的box-sizing可以决定width的计算方式。
如果我们显式设置width为关键词auto时，元素的width将会根据元素自身的内容来决定宽度。而其中的min-content和max-content也会根据元素的内容来决定宽度，只不过和auto有较大的差异
min-content： 元素固有的最小宽度max-content： 元素固有的首选宽度
比如下面这个示例：







如果内容是英文的话，min-content的宽度将取决于内容中最长的单词宽度，中文就有点怪异（其中之因目前并未深究），而max-content则会计算内容排整行的宽度，有点类似于加上了white-space:nowrap一样。
上例仅展示了min-content和max-content最基本的渲染效果（Chrome浏览器渲染行为）。这里不做深入的探讨论，毕竟不是本文的重点，如果感兴趣，欢迎关注后续的相关更新，或者先阅读@张鑫旭 老师写的一篇文章《=