Question

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

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

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

有人可以帮我搞清楚吗？

Answer 1

默认情况下，flex项目希望沿着横轴（对于行方向是垂直的）拉伸，这要归功于flex上的默认值align-items: stretch容器。但是，如果弹性项具有明确的高度，则它将覆盖弹性。

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/

Lemme kno

css3“弹性盒”布局可以吸收两个方向的额外空间吗？

2 个答案: