CSS 的 Multi-line flexbox 是什么功能?

Question

caniuse.com 是说 Firefox 部分支持 Flex box 模型:
http://caniuse.com/#search=flex
MDN 文档上呢, 说 Firefox 到 28 才支持 Multi-line flexbox:
https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Flexible_boxes#Browser_compatibility
搜了下文档没马上找到对应的内容, 那它究竟是什么呢, 会场景用到么, 和普通的什么区别?

Answer 1

你在caniuse.com上将对比图展开，可以看到Firefox的历史版本部分不支持的内容，也就是说，这些不支持的内容就是Firefox 28支持Multi-line flexbox对应的CSS属性。

MDN上面说，FF 22.0之前是需要加-moz-前缀的，这个属于CSS3 Flexbox还不成熟时，浏览器的实现草案，我们暂不考虑，从FF22.0看起。从caniuse.com的对比图上可以看到22-28的Firefox缺少flex-wrap、flex-flow、align-content的支持。

我们看下这三个属性是干啥的。

flex-wrap控制容器是否支持换行，属性值可以为nowrap|wrap|wrap-reverse

MDN说明：https://developer.mozilla.org...
直接上效果图吧

flex-wrap: nowrap

flex-wrap: wrap

flex-wrap: wrap-reverse

带有flex-wrap: wrap或者flex-wrap: wrap-reverse的应该就是所说的multiline flexbox。

然后，来说一下另外两个属性

1. flex-flow是一个组合属性，由flex-direction和flex-wrap组成，所以我觉得这个支持multiline
   flexbox是因为flex-wrap。

2. 在flexbox的MDN文档中说了，对于flex元素，vertical-align无效，所以align-content看起来就是为了弥补这个而增加的属性。