製作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的列中使用的可用寬度

回答

相關問題