我一直在使用下面提到的代码,它适用于我的Chrome,但不适用于我的IE9和Safari.
我搜索了解决方案,尽管我有各种供应商前缀,但这些结果令我感到困惑.
<div style="display: flex; flex-direction: row;">
<div></div>
<div></div>
</div>
解决方法
CSS FlexBox模型针对UI设计进行了优化.
它的开发主要是为了避免溢出父元素.当祖先元素大小受到限制时,它会缩小子项.当祖先元素大小扩展时,它将通过扩展子元素的大小来填充空间.
Flex容器缩小和展开行为可能会破坏最小和最大宽度/高度属性.
它的开发主要是为了避免溢出父元素.当祖先元素大小受到限制时,它会缩小子项.当祖先元素大小扩展时,它将通过扩展子元素的大小来填充空间.
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
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
