Question

我试图确定为什么这不会像人们期望的那样起作用：

<style>
holder{
    display:flex;
    border:thin solid black;
}
column{
    flex: 1;
    background:cornflower;
    border:thin solid yellow;
}
holderb{
    flex-direction: column;
    display:flex;
}
row{
    border:thin solid blue;
    flex:1;
    background:yellow;
}
</style>


<holder>
    <column>
        <holderb>
            <row>row1col1</row>
            <row>row1col2<br/>hi<br/>hi<br/>hi<br/>hi</row>
        </holderb>
    </column>
    <column>
        <holderb>
            <row>row1col1</row>
            <row>row1col2</row>
        </holderb>
    </column>
</holder>

我试图获得一个2×2网格。我注意到将flex-direction:column移动到holder DOES会产生这个结果，但我想知道为什么相反的情况不正确。

Answer 1

在使用可变高度的物品时制作2x2网格将不可避免地导致看起来不均匀的东西。您的holderb代码的子项不遵守flex: 1属性的原因是您没有指定holderb代码应该占用父代的高度。

通过向height: 100%标记添加holderb，您可以获得占用所有空间的“网格”，这可能是您想要的。

https://jsfiddle.net/0uz6txyu

编辑：好的，这个肯定。

https://jsfiddle.net/gcf12eq5/3

柔性盒内的css弯曲方向

1 个答案: