于是乎，我们解决了排列的问题，可以方便的横排，竖排，反着排，还不用消除浮动了。但这就够了么？来个新属性吧，order，表示元素在主轴上的排列顺序。额，这个当然不是整体定义，而是对布局中某一个元素进行的细致调整。所以算是个体属性。它的默认值为 0，数值越大有靠后，越小越靠前，可以取负值，不能取小数。然后要注意这只是视觉上的次序，而没有改变元素的真正顺序。比如对屏幕阅读器，这个次序就不会产生影响。
这，并不完美。我们只是简单的解决了一下排列。确实，已经比以前自由太多了。但，这不足以成为一套系统。它，能解决各种设备尺寸跨度大的问题么？
不能。媒体查询也是 CSS3 的内容，我们没必要把这么方便的东西费掉不用。但是，我们可以给它做一些补充。毕竟我们媒体查询不太可能细致的规定每一个尺寸，那么自适应的能力，就是这个布局方法是否好用的重要标准。
如果我们布局中的子元素可以自动的膨胀和收缩，来适应宽度，就很开熏。但这还不够。也许这一行中的元素，我们并不希望都增长，或者我希望他们增长的量不同……
反正要求复杂，但是希望实现简单。（我就这么事儿多，你咬我呀！
flex-grow，grow 是生长的意思，这个属性是规定这个元素如何扩张的。但是扩张的前提是，主轴上存在空白，否则就没有生长的空间。
默认，子元素不做扩张，这时候 flex-grow 的值为 0。你可以给它设置为正数的值（在你没有了解具体规则的时候不要使用小数）。然后把主轴上的空余空间按这个数值比例分配给这些子元素。如果数值为 0 自然分不到，所以不扩张。你看，完全说得通。
相反的，我们还有 flex-shrink 来表示在主轴空间不足的时候子元素如何收缩，默认值是 1，即主轴空间不足时，该元素会收缩。注意不能取负值。0 表示不收缩。
强调，这两个属性的计算比较复杂，我们这里先把整体脉络抓住，所以不做展开，大家可以自行查询。
自适应有了，但是我们又怕他们太随便，所以呢，还可以使用 min-width 和 max-width 进行限制。
然后还有一个属性 flex-basis，说的是元素沿主轴方向的尺寸，因为和主轴方向相关，那就可能是定义宽度，也可能是定义高度了。那，我们为什么不用宽高呢？用宽高就是固定尺寸了。而这个属性定义的是，元素在进行扩张或者收缩之前，在主轴方向上占用的长度。
好，个体属性也都说了，所以我们的弹性布局已经讲完了。好像，也没啥，回头想想：
- 规定了两个轴的方向，当然默认方向和我们预期一致，一般也不用改；
- 然后元素可以自由调整次序，虽然只是视觉上的次序；
- 元素在主轴上的基础尺寸，但这个尺寸不是最终结果；
- 可以收缩和扩张，关键是还可以自由分配比例。
这是新内容，也确实有几个新属性，而且是新的体系。但谁说这个很复杂我想打谁，你也太小看我的理解能力了吧，好歹我也有小学三年级以上的理解水平啊！
哼唧，小老鼠为这些东西花了一个多星期的剥茧抽丝……（咳咳，这不是重点
你看到这些只是最基础的属性，后面还有一点，关于对齐的规则，不太多，而且和网格布局共用。
暂无评论内容