使柔性元素忽略子元素

是否有可能讓柔性元素忽略子元素，因此它的大小不會影響其他元素？使柔性元素忽略子元素

例如，我有一個包裝display: flex。它有一個標題，內容和頁腳。

<div class="wrapper"> 
    <header></header> 
    <article></article> 
    <footer></footer> 
</div>

我想包裝忽略頭標記（頭將固定到窗口的頂部）。該文章將被設置爲flex: 1，因此它佔據了剩餘空間，強制頁腳位於頁面底部。下面是一些示例CSS：

.wrapper { 
    display: flex; 
    flex-direction: column; 
    height: 100%; 
    padding-top: 50px; /* Accounts for header */ 
} 

header { 
    height: 50px; 
    position: fixed; 
    top: 0; 
    width: 100%; 
} 

article { 
    flex: 1; 
} 

footer { 
    height: 50px; 
}

我知道我可以只動頭的包裝之外，但我有很多現有的代碼，這將使這有點難度。我甚至可能問什麼？

來源

2016-10-03 Sean

你能發佈一個完整的工作示例嗎？（一段） – Amit

http://stackoverflow.com/q/39069320/3597276 –

你在使用Firefox嗎？ –

當你聲明.wrapper爲display:flex時，你會自動隱式聲明它的所有直接子元素爲display:flex-item。你可以用一些簡單的東西覆蓋隱式聲明header { display: block; }

來源

2016-10-04 14:33:49

我目前在這同樣的情況和解決方案不起作用。在其中一個flex子元素上設置「display：block」後，它仍然表現爲flex-item元素。任何線索？ –

它以什麼樣的方式像一個彈性項目？你能提供一個CodePen來看看嗎？ –

我也想知道，直接的孩子以何種方式像您所說的那樣充當彈性項目？什麼是'flex-item'？我所知道的唯一與flex相關的顯示類型是'flex'和'inline-flex'。當我說孩子仍然表現爲彈性項目（試圖使用與您使用的相同術語）時，我的意思是，它仍然參與與其他兄弟姐妹的彈性尺寸調整和定位，並且不會被忽略。 –

在你的.wrapper中聲明flex-wrap: wrap。然後，爲了您的標題，您可以添加樣式flex-basis: 100%，這將強制所有其他標題下方的內容。

來源

2017-04-20 16:22:02

這應該完全是被接受的答案。 –

您可以在子元素上使用flex-shrink: 0以防止它們縮小以填充容器。並在容器/包裝紙上使用flex-wrap: wrap，這樣您的孩子就可以包裝了。

來源

2018-01-20 03:24:37 Alexander

使柔性元素忽略子元素

回答

相關問題