Question

左侧有一列，右侧有一列。这些列具有相同的高度，使用flexbox创建：

HTML

<div class="flex-container">
    <div class="left flex-item">Grounds rich pumpkin spice milk aftertaste doppio cream carajillo. Espresso body iced rich caramelization brewed sit organic crema. Qui grounds doppio wings ristretto barista cream brewed coffee aftertaste ristretto that. Froth americano, french press and dark java brewed.Grounds rich pumpkin spice milk aftertaste doppio cream carajillo. Espresso body iced rich caramelization brewed sit organic crema. Qui grounds doppio wings ristretto barista cream brewed coffee aftertaste ristretto that. Froth americano, french press and dark java brewed.</div>
    <div class="right flex-item">
        <div class="stack stack-top">stack</div>
        <div class="stack stack-below">stack</div>
    </div>
</div>

CSS

.flex-container {
    display: flex;
}

.flex-item {
    flex: 1 0;
}

.left, .right, .stack {
    border: 1px solid silver;
}

右侧的列应垂直分为两个堆叠，高度相同（50％）。它应该是动态到左侧列的高度。

有没有办法使用flexbox并且不使用高度属性？（无需在所有浏览器中工作）

JSFiddle

Answer 1

是的，您可以将第二个flex项目设为flexbox本身，并将方向更改为column，然后将flex: 1应用于子项目。

HTML（无变化）

CSS

.flex-container {
    display: flex;
}

.flex-item {
    flex: 1 0;
}

.left, .right, .stack {
    border: 1px solid silver;
}

.flex-container > div:nth-child(2) {
    display: flex;
    flex-direction: column;
}

.flex-container > div:nth-child(2) > div {
    flex: 1;
}

DEMO：http://jsfiddle.net/ha0aqysk/

两个全高柱，一个分为两个堆叠，高度相同

1 个答案: