使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

使用position: absolute的子元素，从柔性计算中排除

Answer 3

用于flex: 0 0 100%;您想要在新行中的子项并添加flex-wrap: wrap到包装纸上。

Answer 4

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