CSS 樣式取決於父 flexbox 是否被包裝

Question

我想建立一個簡單的網頁，header 看起來像這樣：

 header { display: flex; justify-content: space-between; } #header { flex-grow: 1; display: flex; flex-wrap: wrap; } #titre { display: inline-block; } nav { display: inline-flex; } nav a { display: inline-block; } #lang { flex-grow: 0; flex-shrink: 0; }

 <header> <div id="header"> <a id="titre" href="...">John Doe</a> <nav> <a href="...">...</a> <a href="...">...</a>... </nav> </div> <div id="lang">...</div> </header>

當#title和nav放在一行時，我想要這個：我想要的單行版本

否則，我希望所有這些元素逐行顯示：我想要的多行版本

是否可以僅使用 CSS 來執行此操作，例如以#header是否被包裝為條件？

Answer 1

#titre{ 顯示：塊； } nav a { 顯示：塊； }