blocks|key|5721646|text|你可以通过flex-direction继承它:+inherit；|type|unstyled|depth|inlineStyleRanges|entityRanges|data|5721647|entityMap^0|0^^$0|@$1|2|3|4|5|6|7|D|8|@]|9|@]|A|$]]|$1|B|3|-4|5|6|7|E|8|@]|9|@]|A|$]]]|C|$]]

<p>You can inherit it by flex-direction: inherit;</p>


blocks|key|5721735|text|flex-direction仅适用于.main-header的子代，而不适用于任何其他子代。如果将flex-direction添加到：.main-header，.main-nav+{+display:+flex;}，则它将同时应用于.main-header和.main-nav的子项。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|5721736|entityMap^0|0^^$0|@$1|2|3|4|5|6|7|D|8|@]|9|@]|A|$]]|$1|B|3|-4|5|6|7|E|8|@]|9|@]|A|$]]]|C|$]]

<p>flex-direction will only apply to the children of .main-header, not to any other descendants. If you add flex-direction to: .main-header, .main-nav { display: flex;} instead, then it will apply to the children of both .main-header and .main-nav.</p>


blocks|key|1936940|text|​|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1936941|@media+(max-width:+969px)+{

.main-header,.main-nav+{+++++display:+flex;+flex-direction:+column;+align-items:+center;}+


}++|code-block|syntax|javascript|1936942|+++++<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>+|1936943|1936944|entityMap^0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|L|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|M|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|D|7|N|8|@]|9|@]|A|$E|F]]|$1|I|3|4|5|6|7|O|8|@]|9|@]|A|$]]|$1|J|3|-4|5|6|7|P|8|@]|9|@]|A|$]]]|K|$]]

<p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-css lang-css prettyprint-override"><code>@media (max-width: 969px) {

.main-header,.main-nav {     display: flex; flex-direction: column; align-items: center;} 


}  </code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>     &lt;header class="main-header"&gt;
        &lt;h1 class="name"&gt;&lt;a href="#"&gt;Best City Guide&lt;/a&gt;&lt;/h1&gt;
        &lt;ul class="main-nav"&gt;
            &lt;li&gt;&lt;a href="#"&gt;ice cream&lt;/a&gt;&lt;/li&gt;
            &lt;li&gt;&lt;a href="#"&gt;donuts&lt;/a&gt;&lt;/li&gt;
            &lt;li&gt;&lt;a href="#"&gt;tea&lt;/a&gt;&lt;/li&gt;
            &lt;li&gt;&lt;a href="#"&gt;coffee&lt;/a&gt;&lt;/li&gt;
        &lt;/ul&gt; 
    &lt;/header&gt;&lt;!--/.main-header--&gt; </code></pre>
</div>
</div>
</p>


blocks|key|1565299|text|不，它不是继承的属性，所以不会传给子代。您可以检查属性是否通过某些站点(如MDN或W3School+)继承。|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|1565300|如果你想使子flex-container的子元素在列中对齐，你必须重新设置它。|1565301|entityMap|0|LINK|mutability|MUTABLE|url|https://developer.mozilla.org/en-US/docs/Web/CSS/flex-direction|1|https://www.w3schools.com/cssref/css3_pr_flex-direction.asp^0|11|3|0|15|8|1|0|0^^$0|@$1|2|3|4|5|6|7|P|8|@]|9|@$A|Q|B|R|1|S]|$A|T|B|U|1|V]]|C|$]]|$1|D|3|E|5|6|7|W|8|@]|9|@]|C|$]]|$1|F|3|-4|5|6|7|X|8|@]|9|@]|C|$]]]|G|$H|$5|I|J|K|C|$L|M]]|N|$5|I|J|K|C|$L|O]]]]

<p>No, it is not an inherited property so it won't pass down to children. You can check to see if a property is inherited through some sites like <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/flex-direction" rel="nofollow noreferrer">MDN</a> or <a href="https://www.w3schools.com/cssref/css3_pr_flex-direction.asp" rel="nofollow noreferrer">W3School</a>.</p>

<p>If you want the child flex-container's children to align in column, you have to specifically set it again.</p>


<p>When I set the flex-direction value of .main-header the children of .main-nav are in a row not a column. So I was wondering if the children of flex-containers that are in flex-containers never get affected by the flex-container declarations of the parent container of their parent container.</p>

<pre><code> &lt;header class="main-header"&gt;
    &lt;h1 class="name"&gt;&lt;a href="#"&gt;Best City Guide&lt;/a&gt;&lt;/h1&gt;
    &lt;ul class="main-nav"&gt;
        &lt;li&gt;&lt;a href="#"&gt;ice cream&lt;/a&gt;&lt;/li&gt;
        &lt;li&gt;&lt;a href="#"&gt;donuts&lt;/a&gt;&lt;/li&gt;
        &lt;li&gt;&lt;a href="#"&gt;tea&lt;/a&gt;&lt;/li&gt;
        &lt;li&gt;&lt;a href="#"&gt;coffee&lt;/a&gt;&lt;/li&gt;
    &lt;/ul&gt; 
&lt;/header&gt;&lt;!--/.main-header--&gt; 


@media (min-width: 769px) {.main-header,.main-nav { display: flex;}  
                           .main-header { flex-direction: column; align-items: center;}}  
</code></pre>


Do flex container properties never apply to the children of flex containers in them?

翻译质量差，导致语言生硬或混乱。

没有提供实际的解决方法或示例。

解答不清晰，无法理解或解决问题。

页面排版不美观，阅读体验差。

文章

问答

视频

学习中心

腾讯云实验室

直播

竞赛

腾讯云代码分析专区

腾讯iOA零信任安全管理系统专区

腾讯云架构师技术同盟交流圈

腾讯云数据库专区

腾讯云顾问专区

腾讯云原生专区

腾讯混元专区

腾讯云TCE专区

腾讯云Lighthouse专区

腾讯云HAI专区

腾讯云Edgeone专区

腾讯云存储专区

腾讯云智能专区

腾讯轻联专区 

腾讯云开发专区

TAPD专区

腾讯轻量云游戏服专区

腾讯云最具价值专家

腾讯云架构师技术同盟

腾讯云创作之星

腾讯云开发者先锋

腾讯云代码助手

云原生构建

TAPD 敏捷项目管理

Cloud Studio

SDK中心

API中心

命令行工具

涵盖代码开发、场景应用、自动测试全流程，助你从零构建专属AI助手

一站式MCP教程库，解锁AI应用新玩法

当我设置.main-header的flex-direction值时，.main-nav的子项在一行中，而不是列中。因此，我想知道flex容器中的flex容器的子容器是否永远不会受到其父容器的父容器的flex容器声明的影响。 <header class="main-header">    <h1 class="name"...

问flex容器属性永远不会应用于其中flex容器的子容器吗？
EN

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问flex容器属性永远不会应用于其中flex容器的子容器吗？EN