如何在 Flexbox 中包裝後保持統一的 Flex-Item 寬度？

如何在包裝後保持統一的Flex-Item 寬度

Flexbox 提供了創建靈活佈局的能力，但是當涉及到包裹Flex-Item 時，它們的寬度可能會改變變化很大。為了解決這個問題，讓我們深入研究使用 CSS 媒體查詢的巧妙解決方法。

解決方案

雖然不是嚴格意義上的解決方案，但以下方法提供了一種優雅的替代方案：媒體查詢，無需借助 JavaScript。

SCSS Mixin

用法

將mixin 套用於您的彈性項目：

將mixin 套用於您的彈性項目：

高級替代

如果你的彈性容器的寬度不是由於視口大小的限制，您可以使用元素查詢而不是瀏覽器媒體查詢。這是Flex 容器的mixin：

說明

對於每個指定的flex-basis，我們根據視窗計算每行的最大項目數寬度。然後，我們建立媒體查詢以將項目的最大寬度限制為視口寬度的百分比。

範例

看下面更新的CodePen：

https://codepen.io/anon/pen/aNVzoJ

這演示了彈性項目如何包裹後保持所需的寬度，確保佈局一致。

以上是如何在 Flexbox 中包裝後保持統一的 Flex-Item 寬度？的詳細內容。更多資訊請關注PHP中文網其他相關文章！