使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;
}

我知道我可以将标题移到包装器之外，但我有很多现有的代码，这会使问题变得更加困难。我所问的是否可能？

- Sean

---

你能发布一个完整的工作示例吗？（一小段代码） - Amit

http://stackoverflow.com/q/39069320/3597276 - Michael Benjamin

你正在使用Firefox吗？ - Michael Benjamin

你想要这样的东西吗？https://jsfiddle.net/xvzbwksx/ - user4994625

这正是我想要的。出于某种原因，Chrome仍在尝试将我的标题计算到flex元素中，我正在使用Bootstrap及其固定的导航栏，因此标题元素实际上并没有position: fixed，所以我想知道这是否是问题的一部分。 - Sean

在这里找到答案：https://dev59.com/aVwY5IYBdhLWcg3wHkuK - mr.mii

Answer 1

在你的 .wrapper 里声明 flex-wrap: wrap。然后针对你的头部，可以添加样式 flex-basis: 100%，这将强制使所有其他内容在头部下面显示。

- Adrian Barsby

---

@LisaCerilli，这是有用的信息，对于OP的问题也是一个好的解决方案，但这仍然没有回答如何忽略一个元素的一般性问题，这就是为什么它不是被接受的答案的原因。 - Cory Kleiser

Flex-basis是唯一的方法，可以强制子元素表现得像不是弹性内容的一部分。 - Moseleyi

Answer 2

使用position: absolute来让子元素排除在弹性盒计算之外。

- Ayan

---

子元素忽略了这个样式的 flex。因此我想这应该是答案。 - Dami

Answer 3

对于想要单独成行的子元素，请使用flex: 0 0 100%;，并在包裹元素上添加flex-wrap: wrap。

- Mehbub Rashid

Answer 4

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

- Alexander

Answer 5

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

- lucian

Answer 6

尝试给你想要在 flex 外运行的子元素添加以下属性： display: block; width: 100%;

- David Leeman

Answer 7

在具有 display: flex 的包装器上添加 flex-wrap: wrap。
这对我很有用。

- Magnus Smed