使寬度和靈活的物品一起玩得很好

簡短回答： flex-shrink和flex-basis屬性很可能就是您在尋找的解決方案。

詳細解答

假設您希望將圖像和文本像這樣並排排列：

現在，假設您使用Flexbox 來實現這一點。將父元素設置為display: flex;是一個良好的開端。

 <code>.container { display: flex; }</code>

結果是……

糟糕！好吧，我想這還可以接受。圖像緊貼文本是有道理的，因為我們沒有設置圖像的寬度。理想情況下，我們希望圖像具有固定寬度，然後文本佔據剩餘空間。

好的，讓我們來做吧！

 <code>.container { display: flex; } img { width: 50px; margin-right: 20px; }</code>

這在Chrome 中看起來很棒。但是等等，什麼？如果我們在Firefox DevTools 中檢查圖像標籤，我們會發現它根本不是我們設置的寬度值：

我們可以使用min-width來強製圖像達到我們想要的50px 寬度：

 <code>img { min-width: 50px; margin-right: 20px; }</code>

但是，這只會幫助設置寬度，所以我們也必須添加一個margin。

 <code>img { min-width: 50px; margin-right: 20px; }</code>

就是這樣。在Firefox 中更好，並且在Chrome 中仍然有效。

更詳細的解答

我意識到圖像之所以被壓縮，是因為我們需要使用flex-shrink屬性來告訴Flex 項目不要減小大小，無論它們是否具有寬度。

所有Flex 項目的flex-shrink值都為1。我們需要將圖像元素設置為0：

 <code>.container { display: flex; } img { width: 50px; margin-right: 20px; flex-shrink: 0; }</code>

越來越好了！但是我們仍然可以做更多改進。

最終解答

我們可以進一步整理，因為flex-shrink包含在flex簡寫屬性中。

 <code>flex: none | [ ? || ]</code>

如果我們將flex-shrink值設置為0，並將flex-basis值設置為我們希望圖像具有的默認寬度，那麼我們可以完全擺脫width屬性。

 <code>.container { display: flex; } img { flex: 0 0 50px; margin-right: 20px; }</code>

哦，耶：

另一個例子

flex-shrink屬性解決了大量其他問題，如果您想開始使用Flexbox，它非常重要。這是另一個例子說明為什麼：我偶然發現了另一個類似於上述的問題，我在最近一期的通訊中提到了它。我正在構建一個導航組件，允許用戶左右滾動多個項目。在檢查我的工作時，我注意到以下問題：

較長的導航項目不應該像那樣換行——但我最終明白了為什麼會發生這種情況，這要感謝之前的問題。如果將flex-shrink屬性設置為0，它將告訴此導航中的每個項目不要收縮，而是採用內容的寬度，如下所示：

是的，我們可以再次採取額外的步驟來使用flex屬性，這次使用auto作為flex-basis ，因為我們希望在分配導航容器中的空間時考慮所有項目盡可能多的空間。

萬歲！我們解決了。儘管答案只是一行代碼，但它對於創建真正靈活的元素至關重要。

以上是使寬度和靈活的物品一起玩得很好的詳細內容。更多資訊請關注PHP中文網其他相關文章！