我是 Web 開發和 React 的新手（在 CSS 方面相當業余），所以我對 flex 作業原理的理解肯定存在一些基本問題。
參考這個代碼框，我正在設計的網站（為了提高自己的技能）似乎（因為沒有更好的詞）在主頁中有某種“分流”。要詳細說明，請密切注意頂部的導航欄。一旦您單擊“關于”，整個頁面似乎會向右移動一點。只有主頁受到這種方式的影響。
我嘗試使用瀏覽器方便的“檢查工具”自行解決問題。得出以下結論。
- 似乎主頁的寬度為 1519 像素，而所有其他頁面的大小為 1536 像素。我無法理解為什么會有 15px 的差異。
- 試圖隔離問題（通過洗掉所有元素并將它們逐個添加以查看哪個是錯誤的），我意識到每當我將 flex 元素放置在另一個 flex 元素中時都會導致這種“分流”。感謝其他 stackoverflow 的答案，我發現 flex 元素的尺寸取決于父級（這又是另一個具有模糊大小屬性的 flex 元素）。
問題
即使我解決了上述問題，仍然存在影響主頁方向的“最新明信片”元素。此外，當我洗掉“最新明信片”的高度屬性時，一切都完美地到位，就像我希望它出現的方式一樣，除了這張卡片的高度是可變的。為了保持一致性，我希望這張卡片的高度是固定的（因為我會通過后端不斷更新這張卡片的內容）。
請求其他開發者在這里闡明這個問題；如果有人能指出問題的根源是什么以及我如何解決它，我將不勝感激。
uj5u.com熱心網友回復：
您所說的“分流”是由于其他頁面占用的高度較小，因此不需要滾動條。當滾動條消失時，頁面基本上擴大了滾動條的寬度，因此內容會稍微向右跳轉。
轉載請註明出處，本文鏈接：https://www.uj5u.com/caozuo/474055.html