flex容器属性永远不会应用于其中flex容器的子容器吗？
flex容器属性永远不会应用于其中flex容器的子容器吗？
提问于 2019-02-08 08:26:12
当我设置.main-header的flex-direction值时，.main-nav的子项在一行中，而不是列中。因此，我想知道flex容器中的flex容器的子容器是否永远不会受到其父容器的父容器的flex容器声明的影响。
<header class="main-header">
<h1 class="name"><a href="#">Best City Guide</a></h1>
<ul class="main-nav">
<li><a href="#">ice cream</a></li>
<li><a href="#">donuts</a></li>
<li><a href="#">tea</a></li>
<li><a href="#">coffee</a></li>
</ul>
</header><!--/.main-header-->
@media (min-width: 769px) {.main-header,.main-nav { display: flex;}
.main-header { flex-direction: column; align-items: center;}} 回答 4
Stack Overflow用户
发布于 2019-02-08 08:35:50
flex-direction仅适用于.main-header的子代，而不适用于任何其他子代。如果将flex-direction添加到：.main-header，.main-nav { display: flex;}，则它将同时应用于.main-header和.main-nav的子项。
Stack Overflow用户
发布于 2019-02-08 08:50:09
@media (max-width: 969px) {
.main-header,.main-nav { display: flex; flex-direction: column; align-items: center;}
} <header class="main-header">
<h1 class="name"><a href="#">Best City Guide</a></h1>
<ul class="main-nav">
<li><a href="#">ice cream</a></li>
<li><a href="#">donuts</a></li>
<li><a href="#">tea</a></li>
<li><a href="#">coffee</a></li>
</ul>
</header><!--/.main-header-->
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/54584424
复制相关文章
相似问题
腾讯云开发者
