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可以在兩個軸上伸展嗎？

回答

相關問題