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

问题描述

我一直在使用下面提到的代码，它工作在我的Chrome上，但不适用于我的
IE9和Safari浏览器我搜索解决方案，尽管我有各种各样的供应商前缀语法，这些结果让我感到莫名其妙。

 < div style =display：flex; flex-direction：row> 
< div>< / div> 
< div>< / div> < / DIV> 
  

解决方案

CSS Flexbox模型针对UI设计进行了优化。
它主要是为了避免父元素溢出而开发的。当祖先元素大小受到限制时，它会缩小孩子。当祖先元素大小扩展时，它将通过扩展子元素的大小来填充空间。
Flex容器的缩小和扩展行为可以使用最小和最大宽度/高度属性来打破。

$ b

CSS版本的FlexBox版本

W3 2009：display：box;

  box-align start |结束|中心|基线|拉伸
方向正常|反转|继承
 box-flex< number> 0.0 
 box-flex-group< integer> 1 
 box-lines single |多个
 box-ordinal-group< integer> 1 visual 
 box-orient horizo​​ntal |垂直|内联轴|块轴|继承行内框元素不可视
 box-pack start |结束|中心|证明
  

W3 2011：显示flexbox | inline-flexbox

  flex-align auto |基线auto 
 flex-direction lr | rl | tb | bt |内联| inline-reverse |块| block-reverse flexboxes no lr | rl | tb | bt 
 flex-order< integer> 1 
 flex-pack start |结束|中心|证明
  

W3 2012：display flex | inline-flex

  align-content flex-start | flex-end |中心|空间之间|空间周围|拉伸
 align-items flex-start | flex-end |中心|基线|拉伸
 align-self auto | flex-start | flex-end |中心|基线|拉伸
 flex-direction行| row-reverse |列| column-reverse 
 flex-flow<'flex-direction'> || <柔性包裹> 
 flex-grow< number> '0'
 flex-shrink< number> '1'
 flex-wrap nowrap |包装| wrap-reverse 
 justify-content flex-start | flex-end |中心|空间之间|空间
订单<号码> 0 
  

I have been using the code mentioned below, It works on my chrome but not works on my IE9 and Safari I googled for the solution despite I got various vendor prefix syntax 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屋！