為什麼 Flex 項目不透過邊距和「邊框」大小縮小以適應每行三個？
發佈於2024-11-17
瀏覽：954
Flex 項目忽略邊距和邊框大小
在Flexbox 中，透過設定flex: 1 1 33.33% 和margin: 10px on flex物品，人們可能會期望每排三個盒子。然而，使用 flex-wrap:wrap 時，盒子不會縮小到每行三個。
原因在於 box-sizing: border-box 的本質。雖然此屬性在寬度和高度計算中包括填充和邊框，但不包括邊距。邊距是單獨計算的，預設情況下，Flex 專案具有 flex-shrink: 1，允許它們縮小以適合容器。
要解決此問題，可以透過設定 flex- 來覆寫預設行為收縮：0。這可以防止彈性項目收縮到邊緣。
另一個解決方案是調整flex-basis值，同時保持flex-grow：1。因為不需要強制執行flex-basis由於 flex-grow 會消耗可用空間，因此可以減少該值以容納邊距。例如，透過設定 flex: 1 1 26% 和 margin: 10px，flex 專案現在可以如預期調整。
最新教學
更多>
-
如何從兩個鍵和值數組建立 JavaScript 物件？從鍵和值數組建構一個物件你有兩個數組，newParamArr和paramVal，你的目標是建立一個JavaScript對象將這些數組中的元素配對。物件中的每個鍵都應該對應 newParamArr 中的一個元素，並且關聯的值應該來自 paramVal。 例如，如果newParamArr 包含[&quo...程式設計 發佈於2024-11-17 -
如何增加 MySQL 中 VARCHAR 資料列的大小？修改MySQL 表中的列大小您可能會遇到類似於問題中描述的情況，您錯誤地設定了表列的大小不合適。在本例中，使用者定義了長度為 300 的 VARCHAR 資料列，而不是最大長度 65353。使用 MySQL 的 ALTER TABLE 語句可以輕鬆解決此問題。 ALTER TABLE 語句可讓您修改...程式設計 發佈於2024-11-17
-
如何在生產環境中將本機 MySQL 資料庫連接到容器化應用程式？用於本地生產部署的Docker 資料庫連線選項在生產環境中，您可能會喜歡使用本地託管的MySQL 資料庫，而不是容器化資料庫。如果您的 Docker-compose.yml 設定映像了上面提供的，您可以無縫連接到本機資料庫。 使用Docker 連接到本地MySQL 資料庫連接您的本地MySQL 資料...程式設計 發佈於2024-11-17
-
利用 Python 實現資料輸入自動化：開發人員指南資料輸入雖然通常被認為是平凡的，但對於維護業務記錄至關重要。但在自動化時代，開發人員可以在改變公司處理大量資料的方式方面發揮關鍵作用。 Python 擁有龐大的函式庫生態系統，提供了強大的工具來自動執行資料輸入任務，減少人為錯誤並提高效率。 為什麼要使用 Python 自動輸入資料...程式設計 發佈於2024-11-17
-
如何使用 CSS 建立帶有邊框的透明三角形？使用CSS 製作帶有邊框的透明三角形用CSS 創建複雜的形狀可能具有挑戰性，但是對於三角形，有多種方法可以實現您想要的效果效果。 您已經嘗試過的一種方法涉及利用邊框。雖然這種技術有效，但它依賴視覺技巧。有沒有更優雅的解決方案？ 是的，有！ Webkit 獨有的方法涉及利用 Unicode 字元 U ...程式設計 發佈於2024-11-17
-
如何在不加表鎖的情況下在大型MySQL生產表上建立索引？如何在不加表鎖的情況下在大型MySQL生產表上建立索引問題背景： 在大型MySQL 表上建立索引可能是一項艱鉅的任務，尤其是在不間斷存取至關重要的生產環境中。傳統的 CREATE INDEX 語句可能會導致完全表鎖定，從而阻塞所有並發操作。 MySQL 版本注意事項：在 MySQL 5.6 及更高...程式設計 發佈於2024-11-17
-
使用express-fast-json-stringify 增強 Express.js 中的 JSON 序列化效能JSON 序列化是 Web 開發中的關鍵任務，特別是對於使用 Node.js 和 Express.js 建立的應用程式。雖然 Node.js 中的原生 JSON 序列化 (JSON.stringify()) 簡單且方便，但它可能成為效能瓶頸，尤其是在重負載下。本文介紹了express-fast-js...程式設計 發佈於2024-11-17
-
為什麼 Go 的 `encoding/csv` 套件會向 CSV 檔案中的參考字串添加額外的引號？對Go 中引用字串的特殊CSV 結果進行故障排除Encoding/CSVGo 中的encoding/csv 套件一直是處理引用字串的許多爭論的主題在CSV 文件中。本文旨在透過探索使用者在將引號的字串寫入 CSV 檔案時遇到額外引號所觀察到的有趣現象來闡明這個問題。 額外引號之謎用戶提供下面的程式碼...程式設計 發佈於2024-11-17
-
如何使用 Unicode 來顯示具有「far」和「fas」類別的 Font Awesome 5 星圖示？Font Awesome 5 星圖示的Unicode：使用「far」和「fas」類別Font Awesome 5 提供常規和實體星形圖標，兩者均由Unicode 值“\f005”表示。要在評級系統中利用這些變化，您可以利用 CSS 在「far」和「fas」類別之間切換。 「fas」類代表實心星星，而...程式設計 發佈於2024-11-17
-
在 Go 中使用 WebSocket 進行即時通信构建需要实时更新的应用程序（例如聊天应用程序、实时通知或协作工具）需要一种比传统 HTTP 更快、更具交互性的通信方法。这就是 WebSockets 发挥作用的地方！今天，我们将探讨如何在 Go 中使用 WebSocket，以便您可以向应用程序添加实时功能。 在这篇文章中，我们将介绍： WebSoc...程式設計 發佈於2024-11-17
-
`MappedBy` 如何促進 JPA 和 Hibernate 中的雙向關係？了解JPA 和Hibernate 中的MappedBy在JPA 和Hibernate 等物件關係映射(ORM) 框架中，MappedBy 是一個有用的註釋在實體類別之間建立雙向關係。此註解用於一對多和多對一關係的上下文中。 推薦用法MappedBy的建議用法如下： 一對多關係： 在一對多關係中，「多...程式設計 發佈於2024-11-17
-
如何在懸停時創建邊框底部的動畫擴充？懸停效果：邊框底部的動畫擴展在這個問題中，目標是創建一個懸停效果，在懸停時擴展元素的底部邊框。為了達到這種效果，我們可以利用變換屬性並在懸停時將其從 0 轉換為 1。 h1 { color: #666; display: inline-block; margin: 0; text-t...程式設計 發佈於2024-11-17
-
Bootstrap 4 Beta 中的列偏移發生了什麼事？Bootstrap 4 Beta：列偏移的刪除和恢復Bootstrap 4 在其Beta 1 版本中引入了重大更改柱子偏移了。然而，隨著 Beta 2 的後續發布，這些變化已經逆轉。 從 offset-md-* 到 ml-auto在 Bootstrap 4 Beta 1 中， offset-md-*...程式設計 發佈於2024-11-17
-
為什麼以及如何覆寫預設的 C++ `new` 和 `delete` 運算子？覆蓋預設C 新建和刪除運算子的好處以自訂實作取代預設新建和刪除運算子的目的在於解決特定問題挑戰或優化C 程式中的資源管理。這種做法提供了幾個潛在的優勢：錯誤檢測：自訂運算子可以檢測不正確的記憶體分配和釋放，降低記憶體洩漏和未定義行為的風險。他們可以追蹤分配的地址並在刪除時將其刪除，從而識別潛在的錯誤...程式設計 發佈於2024-11-17
學習中文
- 1 走路用中文怎麼說？ 走路中文發音，走路中文學習
- 2 坐飛機用中文怎麼說？ 坐飞机中文發音，坐飞机中文學習
- 3 坐火車用中文怎麼說？ 坐火车中文發音，坐火车中文學習
- 4 坐車用中文怎麼說？ 坐车中文發音，坐车中文學習
- 5 開車用中文怎麼說？ 开车中文發音，开车中文學習
- 6 游泳用中文怎麼說？ 游泳中文發音，游泳中文學習
- 7 騎自行車用中文怎麼說？ 骑自行车中文發音，骑自行车中文學習
- 8 你好用中文怎麼說？ 你好中文發音，你好中文學習
- 9 謝謝用中文怎麼說？ 谢谢中文發音，谢谢中文學習
- 10 How to say goodbye in Chinese? 再见Chinese pronunciation, 再见Chinese learning
