Cross Browser支持CSS Flexbox
我一直在使用下面提到的代码，它适用于我的Chrome，但不适用于我的IE9和Safari。
尽管我有各种各样的供应商前缀，但我一直在寻找解决方案，结果让我感到困惑。
<div style="display: flex; flex-direction: row;">
<div></div>
<div></div>
</div>
CSS Flexbox模型针对UI设计进行了优化。 它的开发主要是为了避免父元素溢出。 当祖先元素尺寸缩小时，它会缩小孩子。 当祖先元素大小扩展时，它将通过展开子元素的大小来填充空间。 Flex容器的收缩和展开行为可能会破坏最小和最大宽度/高度属性。
版本的CSS FlexBox版本
W3 2009：显示：盒子;
box-align start | end | center | baseline | stretch
box-direction normal | reverse | inherit
box-flex <number> 0.0
box-flex-group <integer> 1
box-lines single | multiple
box-ordinal-group <integer> 1 visual
box-orient horizontal | vertical | inline-axis | block-axis | inherit inline-axis box elements no no visual
box-pack start | end | center | justify
W3 2011：显示flexbox | 直列Flexbox的
flex-align auto | baseline auto
flex-direction lr | rl | tb | bt | inline | inline-reverse | block | block-reverse flexboxes no lr | rl | tb | bt
flex-order <integer> 1
flex-pack start | end | center | justify
W3 2012：显示flex | 内嵌-FLEX
align-content flex-start | flex-end | center | space-between | space-around | stretch
align-items flex-start | flex-end | center | baseline | stretch
align-self auto | flex-start | flex-end | center | baseline | stretch
flex-direction row | row-reverse | column | column-reverse
flex-flow <'flex-direction'> || <'flex-wrap'>
flex-grow <number> ‘0’
flex-shrink <number> ‘1’
flex-wrap nowrap | wrap | wrap-reverse
justify-content flex-start | flex-end | center | space-between | space-around
order <number> 0
为了涵盖所有Flexbox实现，您的CSS将如下所示：
.foo {
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
-webkit-box-orient: horizontal;
-moz-box-orient: horizontal;
-webkit-box-direction: normal;
-moz-box-direction: normal;
-webkit-flex-direction: row;
-ms-flex-direction: row;
flex-direction: row;
}
但是，请注意，除非您重写之前的灵活方向声明，否则指定flex-direction: row是不必要的：row是默认方向。 另外请注意，IE10是支持Flexbox的第一个IE版本。
不幸的是，IE9根本不支持Flexbox。 IE10支持2011版本。
Opera 12.1+支持最新的2012版本无前缀。 Chrome 30+和IE11 +也会支持它。 Firefox 22也已经支持它，但只是部分 - 它不支持flex-wrap属性和flex-flow速记。
Firefox，Chrome和Safari 3.1以前的版本支持2009版本。 Chrome 21+还支持带前缀的2012版本。
链接地址: http://www.djcxy.com/p/75613.html