HTML5 Flexbox可以在两个轴上伸展吗？

我有一个flexbox div，允许一个SINGLE子元素。到目前为止，我已经能够很好地对齐（顶部，左侧，右侧，底部等），包括垂直拉伸。我也希望能够在垂直同时支持水平拉伸（'同时'似乎是关键）。HTML5 Flexbox可以在两个轴上伸展吗？

我已经能够通过在子元素上将'flex'属性设置为'1 100％'来实现横向拉伸，但是这似乎忽略了应用于父元素的任何填充（以及应用于子节点）。

看看flexbox规格，我无法找到任何其他方式沿着flexbox的主轴进行此操作。跨轴拉伸不成问题。

来源

2012-04-30 John Evans

我找到了。我正在寻找的属性是'flex 1 0px'，它适用于Chromium（v20）的最新版本，但不适用于当前的Chrome版本（v18）。在铬v20 +和Dartium v20 + –

这是可能的。这里是一个小样本，显示您如何：

.centerbox { 
 
    /* basic styling */ 
 
    width: 350px; 
 
    height: 95px; 
 
    font-size: 14px; 
 
    border: 1px solid #555; 
 
    background: #CFC; 
 
    /* flexbox, por favor */ 
 
    display: -webkit-box; 
 
    -webkit-box-orient: horizontal; 
 
    -webkit-box-pack: center; 
 
    -webkit-box-align: center; 
 
    display: -moz-box; 
 
    -moz-box-orient: horizontal; 
 
    -moz-box-pack: center; 
 
    -moz-box-align: center; 
 
    display: box; 
 
    box-orient: horizontal; 
 
    box-pack: center; 
 
    box-align: center; 
 
}

<!DOCTYPE html> 
 
<html> 
 

 
<head> 
 
    <style> 
 
    .centerbox { 
 
     /* basic styling */ 
 
     width: 350px; 
 
     height: 95px; 
 
     font-size: 14px; 
 
     border: 1px solid #555; 
 
     background: #CFC; 
 
     /* flexbox, por favor */ 
 
     display: -webkit-box; 
 
     -webkit-box-orient: horizontal; 
 
     -webkit-box-pack: center; 
 
     -webkit-box-align: center; 
 
     display: -moz-box; 
 
     -moz-box-orient: horizontal; 
 
     -moz-box-pack: center; 
 
     -moz-box-align: center; 
 
     display: box; 
 
     box-orient: horizontal; 
 
     box-pack: center; 
 
     box-align: center; 
 
    } 
 
    </style> 
 
</head> 
 

 
<body> 
 
    <div class="centerbox"> 
 
    <textarea>resize me, please</textarea> 
 
    </div> 
 
</body> 
 

 
</html>

FYI：阿克塞尔拉塞尔做了写一个类为多浏览器支持一些伟大的工作：http://infrequently.org/2009/08/css-3-progress/

来源

2012-04-30 18:56:55 MUG4N

虽然你找到了你解决方案，我认为下一个片段对于所有寻求通用解决方案的开发人员（例如我自己）来说都很方便。 http://jsfiddle.net/EL2KL/1/ 如果你发布你的解决方案，我会很高兴。

p.s.谢谢吉日（flex master）

来源

2012-07-25 08:47:12 shex

HTML5 Flexbox可以在两个轴上伸展吗？

回答

相关问题