跨浏览器支持CSS Flexbox

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除非您覆盖先前的flex-direction声明,否则不需要指定: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 | 直列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