Question

我一直在使用下面提到的代码，它可以在我的Chrome上运行，但不适用于我的IE9和Safari。

我搜索了解决方案，尽管我有各种供应商前缀，但这些结果令我感到困惑。

<div style="display: flex; flex-direction: row;">
    <div></div>
    <div></div>
</div>

Answer 1

要涵盖所有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的第一个版本。

Answer 2

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 | inline-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 | inline-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

Answer 3

我的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+ */
}

Answer 4

不幸的是，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版本。

Answer 5

我建议阅读规范以完全理解：http://dev.w3.org/csswg/css-flexbox/

对于有视觉思想的@ chris-coyier最近在（@ hugo-giraudel）的帮助下修改了他的帖子：http://css-tricks.com/snippets/css/a-guide-to-flexbox/

代码示例：直播（感谢@ chris-coyier找不到原创帖子如此重拍）：http://cdpn.io/oDxnp

编译出来的看起来像这样

显示：flex; =＆GT;

display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;

flex-direction：row; =＆GT;

-webkit-box-orient: horizontal;
-webkit-box-direction: normal;
-webkit-flex-direction: row;
-ms-flex-direction: row;
flex-direction: row;

跨浏览器支持CSS Flexbox

5 个答案:

编译出来的看起来像这样