html - 嵌套元素的 CSS flexbox 行为

Question

谁能告诉我 CSS flexbox 在嵌套元素中的表现如何？例如，我有这个代码：

    <div id="layout">
    <nav id="menus">
        <div><a href="#m1">Menu 1</a></div>
        <div><a href="#m2">Menu 2</a></div>
        <div><a href="#m3">Menu 3</a></div>
        <div><a href="#m4">Menu 4</a></div>
    </nav>
    <div id="sidebar">
        <p>Sidebar</p>
    </div>
</div>

和这个：

#layout {
display: flex;
flex-direction: row;
flex-wrap: wrap;
}

我认为导航菜单元素会显示为内联元素，但它们没有；如果我想达到这个结果，我需要添加这个代码：

nav {
width: 100%;
display: flex;}

那么......为什么导航元素不继承 display: flex 属性，即使它们是布局 div 的子元素？谢谢。

标签： htmlcssflexbox

Answer 1

为什么导航元素不继承 display: flex 属性，即使它们是布局 div 的子元素？

<nav>默认情况下，元素是，display: block而不是display: inherit.

我想不出任何display: inherit默认的元素。