css3「柔性盒」佈局能否吸收雙方向的額外空間？

我知道「flex」propery可以使flex項目吸收一個方向上的額外空間（如果「flex-direction」值爲「row」，則該行中的額外空間將被吸收）。css3「柔性盒」佈局能否吸收雙方向的額外空間？

但是如果我包裹這些物品？第二行中的項目僅吸收第二行中的額外空間。但是，如果有的話，他們不會吸收垂直方向的空間。

也許demo可以讓你更清楚地理解我。

.container { 
    display:-webkit-flex; 
    -webkit-flex-flow:row wrap; 
    width: 350px; /*just for demo, it should be the same width as the browser*/ 
} 
.item { 
    width:100px; /*All these items have the same width*/ 
    height:200px; 
    border:1px solid; 
    margin:5px; 
} 
.item:nth-child(even) { 
    height:100px; 
} 

<div class="container"> 
    <div class="item">Item 1</div> 
    <div class="item">Item 2</div> 
    <div class="item">Item 3</div> 
    <div class="item">Item 4</div> 
    <div class="item">Item 5</div> 
</div>

我希望item5可以在item2之後。除了保證金之外沒有額外的空間。

有人可以幫我弄明白嗎？

來源

2013-03-15 Charley Chen

你的問題在最後丟失了幾句話，使之很難破譯你的意思。 – cimmanon 2013-03-15 12:28:22

默認柔性物品要沿着橫軸（它是垂直的行方向）由於拉伸至align-items: stretch在柔性容器的默認值。但是，如果Flex項目具有明確的高度，則會覆蓋伸縮性。

http://jsfiddle.net/farpK/5/

如果我改變都height屬性min-height，就開始伸展，因爲他們應該。

來源

2013-03-15 12:26:37 cimmanon

謝謝。但是這裏的高度只是爲了演示。在生產環境中不能更改。 – 2013-03-21 00:44:46

最後，我放棄了使用原生的flex功能。我利用js來弄清楚。 – 2013-03-21 00:46:19

試試這個，我想提出一個佈局（桌面畫面只）完全Flexbox的

* { 
    margin:0; 
    padding:0; 
    font-family: arial; 
    color: #333; 
} 
html { 
    height: 100%; 
    background-color: #111; 
} 
body { 
    height: 100%; 
    background-color: #dedede; 
    display: flex; 
    flex-direction: column; 
    justify-content: space-between; 
} 
body > header, footer { 
    min-height: 32px; 
    line-height: 32px; 
    flex: 0 0 auto; 
} 
body > #body { 
    flex: 1 1 auto; 
    display: flex; 
    flex-direction: row; 
    justify-content: space-between; 
} 
body > #body > nav, aside { 
    flex: 1 1 15%; 
    display: flex; 
    flex-direction: column; 
    justify-content: space-between; 
} 
body > #body > #content { 
    flex: 1 1 70%; 
} 
body > #body > nav { 
    display: flex; 
    flex-direction: column; 
    justify-content: space-between; 
} 
body > #body > nav > #userLinks { 
    display: flex; 
    flex-direction: column; 
    justify-content: flex-start; 
} 
body > #body > nav > #userLinks a { 
    flex: 1 1 auto; 
    color: blue; 
    margin-left: 18px; 
    margin-bottom: 3px; 
    margin-right: 9px; 
    height: 32px; 
    line-height: 32px; 
    vertical-align: top; 
    text-decoration: none; 
} 
body > #body > nav > #userLinks a:hover { 
    background-color: #c0c0c0; 
    color: #e2e2e2; 
} 
body > #body > nav > #userLinks a img { 
    background-color: #333; 
    color: #eee; 
    height: 32px; 
    width: 32px; 
    border: 0; 
    margin-right: 9px; 
} 
body > #body > nav > #todoAppContainer { 
    background-color: #c0c0c0; 
    position: relative; 
    width: 100%; 
} 
body > #body > nav > #todoAppContainer:before { 
    content:""; 
    display: block; 
    padding-top: 100%; 
    /* initial ratio of 1:1*/ 
} 
body > #body > nav > #todoAppContainer >#todoApp { 
    position: absolute; 
    top: 0; 
    left: 0; 
    bottom: 0; 
    right: 0; 
} 
#notifications { 
    background-color: #cbcbcb; 
    height: 64px; 
} 
#communications { 
    background-color: #cacaca; 
    height: 128px; 
} 
#messageBox { 
    flex: 1 1 auto; 
    background-color: #c0c0c0; 
}

http://jsfiddle.net/max1979/6T226/2/

讓我和硝酸鉀

來源

2014-05-18 10:55:01

css3「柔性盒」佈局能否吸收雙方向的額外空間？

回答

相關問題