Html 使 flex 元素忽略子元素
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/39839770/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Make flex element ignore child element
提问by Sean
Is it possible to make a flex element ignore a child element so it's size does not affect the other elements?
是否可以使 flex 元素忽略子元素，使其大小不影响其他元素？
For example, I have a wrapper with display: flex. It has a header, content, and footer.
例如，我有一个带有display: flex. 它有页眉、内容和页脚。
<div class="wrapper">
<header></header>
<article></article>
<footer></footer>
</div>
I want the wrapper to ignore the header tag (the header will be fixed to the top of the window). The article will be set to flex: 1so it takes up the rest of the space, forcing the footer to the bottom of the page. Here is some sample CSS:
我希望包装器忽略标题标记（标题将固定在窗口顶部）。文章将被设置为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;
}
I know I could just move the header outside of the wrapper but I have a lot of existing code that will make that a bit more difficult. Is what I am asking even possible?
我知道我可以将标题移到包装器之外，但我有很多现有的代码会使这变得更加困难。我问的甚至可能吗？
回答by Adrian Barsby
In your .wrapper declare flex-wrap: wrap. Then for your header, you can add the style flex-basis: 100%which will force everything else down below the header.
在你的 .wrapper 中声明flex-wrap: wrap。然后对于您的标题，您可以添加样式flex-basis: 100%，这将强制将所有其他内容放在标题下方。
回答by Ayan
Use position: absolutefor the child element to exclude it from the flex calculations
使用position: absolute的子元素，从柔性计算中排除
回答by Alexander
You can use flex-shrink: 0on the child elements to keep them from shrinking to fill the container. And use flex-wrap: wrapon the container/wrapper so your children will wrap down.
您可以flex-shrink: 0在子元素上使用以防止它们收缩以填充容器。并flex-wrap: wrap在容器/包装纸上使用，这样您的孩子就会包裹起来。
回答by Lucian Davidescu
If trying to use flex-direction:column, the only thing that I found helpful for that is absolute positioning / with the corresponding padding.
如果尝试使用flex-direction:column，我发现唯一对此有帮助的是绝对定位/带有相应的填充。
回答by Magnus Smed
Add flex-wrap: wrapon the wrapper where you're having display: flexon.
That did the trick for me.
添加flex-wrap: wrap您正在使用的包装纸display: flex。
这对我有用。
