IE10中的Flexbox布局属性使用具体详解

武林网(www.vevb.com)文章简介：IE10中的Flexible Box("Flexbox")布局.

经过这一系列对Flexbox的介绍，我想大家对Flexbox在布局中的使用以及其强大功能特性给我们布局带来的方便性都有所了解。话又说回来，虽然Flexbox功能强大（特别是弹性布局），但还是很多同学不敢使用，也不想尝试性使用。我想主要原因出于他的语法版本众多，浏览器对其兼容性等。

在《“老”的Flexbox和“新”的Flexbox》一文中，让我们了解了如何识别Flexbox的语法版本，而在《使用Flexbox：新旧语法混用实现最佳浏览器兼容》和《跨浏览器的Flexbox》能实现浏览器的完美兼容性。

Flexbox Layout模块的兼容图：

既然有方案能让Flexbox布局模块在众多浏览器下实现兼容，那我们今天要说什么呢？从浏览器的兼容性中可以看出，Flexbox布局模块的最新语法“display:flex”在Chrom25.0+、Opera12.1，Firefox22+、IE11+都得到了支持，但我们还有很多用户并不像我们这些前端人员会及时更新自己所用浏览器的版本。那么就存在Flexbox的兼容性问题。说了一大堆的废话，还未进来主题，真有点对不住读者，接下来也不浪费大家宝贵时间，我们一起进入今天的主题——IE10中的Flexible Box("Flexbox")布局

前面的教程也提到过Flexbox布局用于设计比较复杂的页面非常有用。可以轻松的实现屏幕和浏览器窗口大小发生变化时保持元素的相对位置和大小不变。同时减少了依赖于浮动布局实现元素位置的定义以及重置元素的大小。简单点来说，Flexbox实现在不需要媒体查询的情况之下，能很好的实现响应式的布局。（有关于Flexbox实现响应布局，大家可以参考一下《响应式设计的未来——Flexbox》一文）。

Flexbox布局在定义伸缩项目大小时伸缩容器会预留一些可用空间，让你可以调节伸缩项目的相对大小和位置。例如，你可以确保伸缩容器中的多余空音平均分配给多个伸缩项目，当然如果你的伸缩容器没有足够大的空间放置伸缩项目时，浏览器会根据一定的比例减小伸缩项目的大小，使其不溢出伸缩容器。

综合而言，Flexbox布局功能主要具有以下几点：

Flexbox布局的语法经过几年发生了很大的变化，也给Flexbox的使用带来一定的局限性，因为语法版本众多，浏览器支持不一致，致使Flexbox布局使用不多。从前面的教程中我们可以得知，Flexbox布局主要有三种语法版本：

如何区别这些版本？又如何获取对应版本的相关知识，大家可以简单的浏览一下《“老”的Flexbox和“新”的Flexbox》一文。

在了解了Flexbox布局版本的历史发展之后，我们今天要介绍的IE10中的Flexbox布局所使用的语法就是介于2009年老版本和2013年新版本之间的混合版本——flexbox(display:flexbox或display:inline-flexbox)。