跨浏览器支持 CSS Flexbox
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/17447807/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Cross Browser support for CSS Flexbox
提问by Hyman prelusky
I have been using the code mentioned below, it works on my Chrome but not on my IE9 and Safari.
我一直在使用下面提到的代码，它适用于我的 Chrome，但不适用于我的 IE9 和 Safari。
I googled for the solution, despite I got various vendor prefixes, those results are baffling me.
我用谷歌搜索解决方案，尽管我有各种供应商前缀，但这些结果让我感到困惑。
<div style="display: flex; flex-direction: row;">
<div></div>
<div></div>
</div>
回答by cimmanon
To cover all Flexbox implementations, your CSS would look like this:
为了涵盖所有 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;
}
Note, however, that specifying flex-direction: rowis not necessary unless you're overriding a previous flex-direction declaration: row is the default direction. Also note that IE10 is the first version of IE to support Flexbox.
但是请注意，flex-direction: row除非您覆盖之前的 flex-direction 声明，否则不需要指定：row 是默认方向。另请注意，IE10 是第一个支持 Flexbox 的 IE 版本。
回答by chandru kutty
CSS Flexbox model is optimised for UI Design. It is developed primarily to avoid overflowing parent element. It will shrink children when ancestor element size is constricted. It will fill the space by expanding child element's size when ancestor element size extends. Flex container shrink and expand behaviour can break with min and max width / height property.
CSS Flexbox 模型针对 UI 设计进行了优化。它的开发主要是为了避免父元素溢出。当祖先元素大小被限制时，它会缩小子元素。当祖先元素大小扩展时，它将通过扩展子元素的大小来填充空间。Flex 容器收缩和扩展行为可能会因 min 和 max 宽度/高度属性而中断。
CSS FlexBox versions by version
CSS FlexBox 版本（按版本）
W3 2009 : display: box;
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 : display flexbox | inline-flexbox
W3 2011：显示弹性盒 | 内联弹性盒
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 : display flex | inline-flex
W3 2012：显示弹性 | 内联-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
回答by malcubierre
My Flexbox css: I have tested on serveral devices from Android 2.3.3 and IOS and works ok:
我的 Flexbox css：我已经在来自 Android 2.3.3 和 IOS 的服务器上进行了测试并且工作正常：
.flex-container {
display: -webkit-box; /* OLD - iOS 6-, Safari 3.1-6 */
display: -moz-box; /* OLD - Firefox 19- (buggy but mostly works) */
display: -ms-flexbox; /* TWEENER - IE 10 */
display: -webkit-flex; /* NEW - Chrome */
display: flex; /* NEW, Spec - Opera 12.1, Firefox 20+ */
width: 100%;
}
.item {
-webkit-box-flex: 1; /* OLD - iOS 6-, Safari 3.1-6 */
-moz-box-flex: 1; /* OLD - Firefox 19- */
-webkit-flex: 1; /* Chrome */
-ms-flex: 1; /* IE 10 */
flex: 1; /* NEW, Spec - Opera 12.1, Firefox 20+ */
}
回答by Ilya Streltsyn
IE9-, unfortunately, doesn't support Flexbox at all. IE10 supports the 2011 version.
不幸的是，IE9- 根本不支持 Flexbox。IE10 支持 2011 版本。
Opera 12.1+ supports the latest 2012 version unprefixed. It will also be supported by Chrome 30+ and IE11+. Firefox 22 already supports it, too, but only partially — it doesn't support flex-wrap property and flex-flow shorthand.
Opera 12.1+ 支持无前缀的最新 2012 版本。Chrome 30+ 和 IE11+ 也将支持它。Firefox 22 也已经支持它，但只是部分支持——它不支持 flex-wrap 属性和 flex-flow 速记。
Previous versions of Firefox, Chrome, and Safari 3.1+ support 2009 version. Chrome 21+ also supports 2012 version with prefix.
先前版本的 Firefox、Chrome 和 Safari 3.1+ 支持 2009 版本。Chrome 21+ 还支持带前缀的 2012 版本。
回答by imagineux
I would suggest reading the spec to fully understand: http://dev.w3.org/csswg/css-flexbox/
我建议阅读规范以完全理解：http: //dev.w3.org/csswg/css-flexbox/
For the visually minded @chris-coyier has recently revamped his post w/ help from (@hugo-giraudel):http://css-tricks.com/snippets/css/a-guide-to-flexbox/
对于具有视觉意识的@chris-coyier 最近在 (@hugo-giraudel) 的帮助下修改了他的帖子：http://css-tricks.com/snippets/css/a-guide-to-flexbox/
code sample:Live(credit to @chris-coyier just can't find original post so remade): http://cdpn.io/oDxnp
代码示例：Live（归功于@chris-coyier 只是找不到原始帖子，所以重新制作）：http://cdpn.io/oDxnp
compiled out put would look like this
编译出来的看起来像这样
display: flex; =>
显示：弹性；=>
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
flex-direction: row; =>
弹性方向：行；=>
-webkit-box-orient: horizontal;
-webkit-box-direction: normal;
-webkit-flex-direction: row;
-ms-flex-direction: row;
flex-direction: row;
