2

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

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

也许演示可以让你更清楚地理解我。

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

有人可以帮我弄清楚吗？

4

2 回答 2

0

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

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

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

于 2013-03-15T12:26:37.120 回答
0

试试这个，我完全在 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-18T10:55:01.050 回答