跨浏览器支持 CSS Flexbox [英] Cross Browser support for CSS Flexbox

问题描述

我一直在使用下面提到的代码，它适用于我的 Chrome，但不适用于我的 IE9 和 Safari.

我在谷歌上搜索了解决方案，尽管我得到了各种供应商前缀，但这些结果让我感到困惑.

<div></div><div></div>

解决方案

CSS Flexbox 模型针对 UI 设计进行了优化.它的开发主要是为了避免父元素溢出.当祖先元素大小被限制时，它会缩小子元素.当祖先元素大小扩展时，它将通过扩展子元素的大小来填充空间.Flex 容器收缩和扩展行为可能会因 min 和 max 宽度/高度属性而中断.

CSS FlexBox 各版本

W3 2009:显示:框；

box-align start |结束 |中心 |基线 |拉紧box-direction 正常 |反向 |继承box-flex <number>0.0box-flex-group <整数>1箱线单|多box-ordinal-group <整数>1 视觉box-orient 水平 |垂直 |内联轴 |块轴 |继承内联轴框元素没有没有视觉盒装开始|结束 |中心 |证明合法

W3 2011:显示 flexbox |内联弹性盒

flex-align auto |基线自动flex-direction lr |rl |tb |BT |内联 |内联反向|块 |块反向 flexboxes 没有 lr |rl |tb |btflex-order <整数>1flex-pack开始|结束 |中心 |证明合法

W3 2012:显示弹性 |内联弹性

align-content flex-start |柔性端|中心 |间隔|周围空间|拉紧对齐项目 flex-start |柔性端|中心 |基线 |拉紧自动对齐 |弹性启动 |柔性端|中心 |基线 |拉紧flex-direction 行 |行反转 |专栏 |列反转flex-flow <'flex-direction'>||<'flex-wrap'>flex-grow <数字>‘0’flex-shrink <数字>‘1’flex-wrap nowrap |包裹|反绕justify-content flex-start |柔性端|中心 |间隔|环绕空间订单<编号>0

I have been using the code mentioned below, it works on my Chrome but not on my IE9 and 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>

解决方案

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 versions by version

W3 2009 : display: box;

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

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

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

这篇关于跨浏览器支持 CSS Flexbox的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！