使柔性元素忽略子元素

是否有可能让柔性元素忽略子元素，因此它的大小不会影响其他元素？使柔性元素忽略子元素

例如，我有一个包装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; 
}

我知道我可以只动头的包装之外，但我有很多现有的代码，这将使这有点难度。我甚至可能问什么？

来源

2016-10-03 Sean

你能发布一个完整的工作示例吗？（一段） – Amit

http://stackoverflow.com/q/39069320/3597276 –

你在使用Firefox吗？ –

当你声明.wrapper为display:flex时，你会自动隐式声明它的所有直接子元素为display:flex-item。你可以用一些简单的东西覆盖隐式声明header { display: block; }

来源

2016-10-04 14:33:49

我目前在这同样的情况和解决方案不起作用。在其中一个flex子元素上设置“display：block”后，它仍然表现为flex-item元素。任何线索？ –

它以什么样的方式像一个弹性项目？你能提供一个CodePen来看看吗？ –

我也想知道，直接的孩子以何种方式像您所说的那样充当弹性项目？什么是'flex-item'？我所知道的唯一与flex相关的显示类型是'flex'和'inline-flex'。当我说孩子仍然表现为弹性项目（试图使用与您使用的相同术语）时，我的意思是，它仍然参与与其他兄弟姐妹的弹性尺寸调整和定位，并且不会被忽略。 –

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

来源

2017-04-20 16:22:02

这应该完全是被接受的答案。 –

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

来源

2018-01-20 03:24:37 Alexander

使柔性元素忽略子元素

回答

相关问题