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

【问题标题】：Can css3 "flex box" layout absorb extra space in both direction?css3“flex box”布局可以在两个方向上吸收额外的空间吗？
【发布时间】：2014-05-18 18:55:01
【问题描述】：

我知道“flex”属性可以使弹性项目在一个方向上吸收额外的空间（如果“flex-direction”的值为“行”，那么行中的额外空间将被吸收。）

但是如果我包装这些物品呢？第二行中的项目只是吸收了第二行中的额外空间。但是，它们不会吸收垂直方向的空间。

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

有人可以帮我弄清楚吗？

【问题讨论】：

你的问题最后少了几个字，很难理解你的意思。

标签： flexbox

【解决方案1】：

由于弹性容器上的默认值align-items: stretch，默认情况下弹性项目希望沿交叉轴（行方向垂直）拉伸。但是，如果弹性项目有明确的高度，它会覆盖弹性。

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

如果我将两个 height 属性都更改为 min-height，它们会开始按应有的方式拉伸。

【讨论】：

谢谢。但是这里的高度只是为了演示。在生产环境中无法更改。
最后，我放弃了使用原生的 flex 功能。我利用js来搞清楚。

【解决方案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/

让我知道

【讨论】：