CSS flexbox嵌套元素行为疑问：子元素为何未继承display:flex属性

核心原因 #

CSS 中的display属性默认不支持继承，父元素的display:flex不会自动传递给子元素。

flex布局的作用边界 #

flex容器的布局规则仅作用于它的直接子节点（flex子项），不会渗透到子项内部影响更深层的元素排布。
你给#layout设置display:flex后，只会控制它的两个直接子元素<nav id="menus">和<div id="sidebar">的横向排列，完全不会影响<nav>内部的元素表现。默认<nav>是块级元素，它内部的<div>也默认是块级元素，自然会上下堆叠，不会出现你预期的横向排列效果。

你新增代码的作用说明 #

你补充的两行CSS刚好解决了两个问题：

• nav { width: 100% }：让<nav>作为#layout的flex子项占满父容器整行，配合#layout的flex-wrap: wrap设置，侧边栏会被挤到下一行展示
• nav { display: flex }：让<nav>自身也成为flex容器，此时它的直接子元素（四个菜单div）才会按照flex规则横向排列，实现你预期的效果。

补充说明 #

CSS 中默认可继承的属性多为文本相关属性（字体大小/颜色、行高、文本对齐方式等），所有布局类属性（display、宽高、内外边距、定位规则等）几乎都不支持默认继承，需要手动给对应元素设置。

内容的提问来源于stack exchange，提问作者JamieITGirl