使flex元素忽略子元素

Posted 2023-03-05

【中文标题】使flex元素忽略子元素

【英文标题】：Make flex element ignore child element

【发布时间】：2017-02-11 21:07:15

【问题描述】：

是否可以让 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;

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

【问题讨论】：

你能发布一个完整的工作样本吗？ (sn-p)

***.com/q/39069320/3597276

您在使用 Firefox 吗？

你想要这样的东西吗？ jsfiddle.net/xvzbwksx

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

【参考方案1】：

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

【讨论】：

@LisaCerilli，这是很好的信息，也是解决 OP 问题的好方法，但它仍然没有回答如何 ignore 元素的一般问题，这就是为什么大概这不是公认的答案。

Flex-basis 是您可以强制孩子表现得好像它不是弹性内容的一部分的唯一方法。

【参考方案2】：

对子元素使用position: absolute 以将其从弹性计算中排除

【讨论】：

子元素会忽略这种风格的 flex。因此，这应该是我猜的答案。

【参考方案3】：

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

【参考方案4】：

将flex: 0 0 100%; 用于您想要在新行中的孩子，并在包装​​器上添加flex-wrap: wrap。

【参考方案5】：

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

【参考方案6】：

在您拥有display: flexon 的包装上添加flex-wrap: wrap。 这对我有用。