css3 "flex box"布局可以在两个方向上吸收额外的空间吗？

Question

我知道"flex"属性可以使flex项目在一个方向上吸收额外的空间(如果"flex-direction"的值为"row"，则该行中的额外空间将被吸收)

但是如果我把这些东西包装起来呢?第二行的项目只是占用了第二行的额外空间。然而，如果有的话，它们不会在垂直方向上吸收空间。

也许这个演示能让你更清楚地理解我。

.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之后。除了边距外，没有多余的空格。

有谁能帮我弄明白吗?

Answer 1

默认情况下，由于flex容器的默认值align-items: stretch, flex项目希望沿着交叉轴(对于行方向是垂直的)拉伸。但是，如果伸缩项具有显式高度，则它将覆盖拉伸性。

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

如果我将两个height属性都更改为min-height，它们就会开始拉伸。

Answer 2

试试这个，我正在做一个布局(桌面屏幕)完全在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/

让我知道