DIV
我們怎麼能讓 margin 元素填滿本身不是 Flexbox 的 Flexbox 專案?
一個元素(甚至是帶有邊距的嵌套元素)可以使用 position:absolute
輕鬆填充其容器——如果它不在 Flexbox 專案內。為什麼這不適用於 Flexbox 專案內的元素?
<main> <nav>NAV</nav> <section> <div>DIV</div> </section> </main> <style> html, body { position:absolute; top:0; left:0; right:0; bottom:0; margin: 0; } main { position:absolute; top:0; left:0; right:0; bottom:0; display: flex; } nav { flex-basis: 250px; background-color: #eee; } section { flex-basis: 100%; background-color: #ccc; margin: 10px; } div { /* position:absolute; top:0; left:0; right:0; bottom:0; */ /* why doesn't the above line work? */ background-color: #cfc; margin: 10px; } </style>
有許多類似的問題,例如這個問題和這個問題,實際上並不適用於彈性盒內的項目或帶有邊距的項目。有許多特殊情況的解決方案,例如align-self:stretch
、height:100%
和box-sizing:border-box
在本例中不起作用,因為嵌套的margin
或Flexbox 本身是這樣的事實不嵌套。這些一次性駭客的問題不斷出現...
那麼填入 Flexbox 專案的通用方法是什麼? position:absolute
這裡有什麼問題?讓元素填充其容器的最通用方法是什麼?
P粉3333954962024-02-22 16:22:19
以下是您可能認為值得探索的想法?我將 nav
作為 main
的兄弟而不是孩子。這對 CSS 來說不是必需的,但結構最有意義。理想情況下,您有 header
、nav``main
、footer
,也可能有 aside
。您確實想避免所有絕對定位。它在手機上的表現不佳 - 想像一下,如果您在頁面上放置一個文字框或文字區域,並且移動用戶單擊它並彈出軟鍵盤,會發生什麼。
body { display: grid; grid-template-columns: [left] 196px [main] 1fr [right]; grid-template-rows: [top] 1fr [bottom]; grid-gap: 4px; outline: 1px dashed #616161; min-height: 100vh; min-width: 0; } body > nav { outline: 1px dashed red; grid-column-start: left; grid-column-end: main; grid-row-start: top; grid-row-end: bottom; } body > main { outline: 1px dashed blue; grid-column-start: main; grid-column-end: right; grid-row-start: top; grid-row-end: bottom; display: flex; flex-flow: column nowrap; } section { flex: 1 1 auto; display: flex; flex-flow: column nowrap; } div { flex: 1 1 auto; margin: 4px; outline: 1px dotted green; min-height: auto; }
DIV