使flex元素忽略子元素

Question

是否可以使flex元素忽略子元素，因此它的大小不会影响其他元素？

例如，我有一个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;
}

我知道我可以将标题移到包装器之外但是我有很多现有的代码会让它变得更加困难。我甚至可能要问什么？

Answer 1

在你的.wrapper声明flex-wrap: wrap。然后，对于标题，您可以添加样式flex-basis: 100%，这将强制标题下方的所有其他内容。

Answer 2

您可以对子元素使用flex-shrink: 0，以防止它们缩小以填充容器。并在容器/包装器上使用flex-wrap: wrap，这样您的孩子就会结束。

Answer 3

如果尝试使用flex-direction:column，我发现唯一有用的就是绝对定位/使用相应的填充。

Answer 4

对子元素使用position: absolute，将其从flex计算中排除

Answer 5

对要换行的孩子使用flex: 0 0 100%;，然后在包装器上添加flex-wrap: wrap。

Answer 6

在flex-wrap: wrap所在的包装器上添加display: flex。
那对我有用。