使 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将其从 flex 计算中排除

Answer 3

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

Answer 4

使用flex: 0 0 100%; 给你想要在一个新行中的孩子并添加flex-wrap: wrap在包装器上。

Answer 5

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

Answer 6

添加flex-wrap: wrap在你有display: flex on 的包装上。
这对我有用。