Flexbox 提供了創建靈活佈局的能力，但是當涉及到包裹Flex-Item 時，它們的寬度可能會改變變化很大。為了解決這個問題，讓我們深入研究使用 CSS 媒體查詢的巧妙解決方法。
解決方案
雖然不是嚴格意義上的解決方案，但以下方法提供了一種優雅的替代方案：媒體查詢，無需借助 JavaScript。
SCSS Mixin
用法
將mixin 套用於您的彈性項目：
將mixin 套用於您的彈性項目：
高級替代如果你的彈性容器的寬度不是由於視口大小的限制，您可以使用元素查詢而不是瀏覽器媒體查詢。這是Flex 容器的mixin：說明
對於每個指定的flex-basis，我們根據視窗計算每行的最大項目數寬度。然後，我們建立媒體查詢以將項目的最大寬度限制為視口寬度的百分比。
範例看下面更新的CodePen：
https://codepen.io/anon/pen/aNVzoJ
這演示了彈性項目如何包裹後保持所需的寬度，確保佈局一致。以上是如何在 Flexbox 中包裝後保持統一的 Flex-Item 寬度？的詳細內容。更多資訊請關注PHP中文網其他相關文章！
