Flexible Box弹性盒子由于历史原因分成旧版本混合版本新版本。如果你要兼容旧版本的浏览器的线;噩梦就来了你需要准备多套语法开发测试成本很高。当然前景是光明的等旧式浏览器逐渐被淘汰弹性盒子的布局必将大放异彩。
上面介绍的都是在外层容器上设的弹性盒子的属性现在看看给内部元素设的弹性盒子的属性。
flex-grow将剩余空间按比例扩展。即当容器空间大于内部元素空间之和时剩余部分将根据各元素指定的flex-grow按比例分配使各元素增大。默认值为0表示剩余空间不分配。
因此当外层容器宽度大于内部元素宽度之和时内部元素的flex-grow值越大分配到的剩余空间的比例越高元素就越大。
flex-shrink将溢出空间按比例收缩。即当容器空间小于内部元素空间之和时溢出部分将根据各元素指定的flex-shrink按比例分配使各元素缩小。默认值为1表示溢出时等比例缩小
因此当外层容器宽度小于内部元素宽度之和时内部元素的flex-shrink值越大分配到的溢出空间的比例越高元素就越小。
order用于指定内部元素的显示顺序默认值0表示元素是根据DOM的先后顺序来显示的有了该属性可以轻松调整顺序。值就是顺序的序号。例如原始不设order元素根据DOM顺序显示。
Flexible Box最大的问题就是各浏览器厂商间的标准各有不同导致开发成本很高。虽然有了新版的语法但如果要兼顾旧版浏览器尤其是IE的话就有点抓狂了。好在前景是光明的等那些旧版浏览器死透透了Flexible Box必将绽放光芒。下一篇介绍一下它在布局上应用感受一下它的优势。
