制作Flexbox的列中使用的可用宽度

有具有柔性的宽度和多个在其内部的流体块的容器。我的目标是在这个容器内使用从左到右的所有可用空间。制作Flexbox的列中使用的可用宽度

Flexbox的使用Flex方向“列”适合几乎完全为我的情景。我有一个问题，它：除非我指定的容器的高度，内部块赞同到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，并将其设置，但是，它是难看的和昂贵，所以我想尽量避免它。

我将不胜感激任何建议！

来源

2014-09-30 Anelook

卸下“包装”具有增加不必要的最大高度相同的效果。如果您由于某种原因，这不是明显对我此刻的包装，对不起，那么你可以添加“柔性成长：1”代替，并保持“包装”，仍具有与添加绝对MAX-同样的效果高度。如果一切都失败，请将max-height设置为0px;希望这有助于:-)

来源

2014-09-30 16:58:33 wojjas

制作Flexbox的列中使用的可用宽度

回答

相关问题