Question

有一个容器，它有一个灵活的宽度和里面的许多流体块。我的目标是在此容器内使用从左到右的所有可用空间。

带有flex-direction“专栏”的Flexbox几乎完全适合我的场景。我有一个问题：除非我指定容器的高度，否则内部块将自己对齐成1个单列（当我希望它们形成多个列时）。

css

    .box {
    display: flex;
    flex-flow: column wrap;
    -webkit-flex-flow: column wrap;
    justify-content: flex-start;
    max-width: 600px;
    /*max-height: 100px -- I am trying to avoid this*/
}

.box .fluid_block {
    max-width: 250px;
}

.fluid_block .title {
    padding-right: 30px;
    width:100px;
    display: inline-block;
    vertical-align: top;
}

.fluid_block .value {
    display: inline-block;
    max-width: 100px;
}

HTML：

<div class="box">
    <div class="fluid_block">
        <div class="title">Fluid block 1</div> 
        <div class="value">some content</div>
    </div>
    <div class="fluid_block">
        <div class="title">Fluid block 2</div> 
        <div class="value">some content some content some content</div>
    </div>
        <div class="fluid_block">
        <div class="title">Fluid block 3</div> 
        <div class="value">some content some content some content some content</div>
    </div>
        <div class="fluid_block">
        <div class="title">Fluid block 3</div> 
        <div class="value">some content some content some content some content</div>
    </div>
</div>

我现在看到的解决方案是用JS计算宽度并设置它，但是它很丑陋而且价格昂贵，所以如果可以的话我想避免它。

我很感激任何建议！

Answer 1

删除“wrap”与添加不需要的max-height具有相同的效果。如果你因为某些原因而对我来说不熟悉，那么你可以添加“flex-grow：1”来保持“wrap”，这仍然具有与添加绝对最大值相同的效果。高度。如果其他所有方法都失败了，请将max-height设置为0px;希望这会有所帮助： - ）

使flexbox列使用可用宽度

1 个答案: