如何使用柔性設置基於內容長度的寬度

Question

我試圖根據內容製作每個項目的寬度，但是到目前爲止，我已將寬度設置爲可用空間。 flex：0 0 auto似乎沒有辦法。我究竟做錯了什麼？

目標的寬度根據內容大小而定。

[Hello] 
[Hello world] 

目前

[Hello     ] 
[Hello world    ] 

https://jsfiddle.net/v6cgLjbd/8/

<span class='box'> 
    <span class='item'>Hello</span> 
    <span class='item'>Hello World</span> 
    <span class='item'>Hello lOOOOONG text</span> 
</span> 

.box { 
    height: 200px; 
    width: auto; 
    border: 1px solid red; 
    display: flex; 
    flex-direction: column; 
} 

.item { 
    background-color: gray; 
    flex: 0 0 auto; 
    width: auto; 
} 

Answer 1

您需要在柔性容器中，加入align-items: flex-start。在父元素上使用flex-direction: column時，子元素上的flex屬性控制高度而非寬度。

.box { 
 
    height: 200px; 
 
    border: 1px solid red; 
 
    display: flex; 
 
    flex-direction: column; 
 
    align-items: flex-start; 
 
} 
 

 
.item { 
 
    background-color: gray; 
 
}

<span class='box'> 
 
    <span class='item'>Hello</span> 
 
    <span class='item'>Hello World</span> 
 
    <span class='item'>Hello lOOOOONG text</span> 
 
</span>