Flex項目的寬度正在減小

Question

我正在嘗試製作一個導航菜單，它將在手機中水平滾動。要做到這一點，我想用flexbox來做，但是當我設置移動視圖時，導航項的寬度會減小。

我嘗試使用flex-grow和flex-basis屬性分別將它們設置爲1和0但它沒有工作。

在這種情況下，我爲導航部分使用了虛擬名稱，但它們可以具有不同的長度。

ul { 
 
    display: flex; 
 
    margin: 0; 
 
    padding: 0; 
 
    list-style: none; 
 
    background-color: #f2f2f2; 
 
    overflow-y: hidden; 
 
    overflow-x: auto; 
 
} 
 

 
li { 
 
    flex-grow: 1; 
 
    flex-basis: 0; 
 
    margin-left: 10px; 
 
}

<ul> 
 
    <li>Item 1</li> 
 
    <li>Item 2</li> 
 
    <li>Item 3</li> 
 
    <li>Item 4</li> 
 
    <li>Item 5</li> 
 
</ul>

Codepen sample

Answer 1

請記住，柔性容器的初始設置爲flex-shrink: 1。

這意味着，默認情況下，Flex項目被允許縮小。這可以防止它們溢出容器。

要禁用此功能，請使用flex-shrink: 0。

因此，對於您li，你可以試試這個（簡寫）：

flex: 1 0 auto (can grow, cannot shrink, initial main size based on content) 

更多細節在這裏：What are the differences between flex-basis and width?