我如何設置柔性容器作爲其柔性項目的寬度？

Question

我有一個柔性容器justify-content: flex-start。由於柔性物品佔用的空間比容器的尺寸小，因此最終會在右側溢出。

除了在flex-container上設置一個明確的寬度之外，有沒有一種方法可以等效於width: auto來消除溢出？

Answer 1

不知道你的問題，而是：

DEMO：http://jsfiddle.net/jn45P/

你只需要能夠在柔性項目的靈活性，利用flex-grow:1;填滿空間

<div class="o"> 
    <div>a</div><div>a</div><div>a</div><div>a</div><div>a</div> 
</div> 

<div class="o flex"> 
    <div>a</div><div>a</div><div>a</div><div>a</div><div>a</div> 
</div> 

div.o 
{ 
    border:2px red solid; 
    padding:2px; 
    width:500px; 
    flex-direction:row; 
    display:flex; 
    justify-content:flex-start; 
} 

div.o > div 
    {border:2px red solid;margin:2px;} 

div.o.flex > div 
    {flex:1 1 auto;} /* enable flexibility on the flex-items */ 

Answer 2

如果你的意思是你想讓容器成爲物品的寬度，而不是擴展到容器寬度的物品......

您可以通過改變display:flex到display:inline-flex

Answer 3

吃出正如Mahks，你可以make the flex container inline建議。但是，如果將它內聯放置不適合您的佈局，則另一種方法是浮動柔性容器（而不是柔性項目）。

Floats將收縮包裝以適應其內容，這對於塊級Flex容器來說沒有什麼不同。內聯級柔性容器在佈局在其父級內聯格式化上下文中時的行爲與inline-block box類似，這意味着默認情況下它也會縮小以適應其內容。