使 flexbox 列使用可用宽度答案

【问题标题】：Making flexbox column use the available width使 flexbox 列使用可用宽度
【发布时间】：2014-11-24 22:38:12
【问题描述】：

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

带有 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计算宽度并设置它，但是它又丑又贵，所以如果可以的话我想避免它。

如有任何建议，我将不胜感激！

【问题讨论】：

标签： css flexbox

【解决方案1】：

删除“wrap”与添加不需要的最大高度具有相同的效果。如果你因为某种原因有包装，目前对我来说并不明显，对不起，那么你可以添加“flex-grow：1”并保留“包装”，这仍然与添加绝对最大值相同的效果-高度。如果一切都失败了，将 max-height 设置为 0px；希望这会有所帮助:-)

【讨论】：