如何通过CSS根据父级flexbox是否换行设置样式？

我正在构建一个网页头部，初始结构和CSS代码如下：

CSS代码：

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;
}

HTML结构：

<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>

需求是：当#titre与nav能容纳在同一行时，保持单行布局；当空间不足导致#header换行时，让这两个元素逐行排列。请问能否仅通过CSS实现这种根据Flex容器是否换行来调整样式的效果？

完全可以通过纯CSS实现，核心是利用Flexbox的flex属性组合，无需媒体查询即可实现自适应布局：

修改后的CSS代码如下：

header {
  display: flex;
  justify-content: space-between;
  align-items: center; /* 让头部元素垂直居中，提升视觉效果 */
}

#header {
  flex-grow: 1;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1rem; /* 控制标题与导航栏的间距，可根据需求调整 */
}

#titre {
  flex-shrink: 0; /* 强制标题不收缩，保持内容原宽度 */
  white-space: nowrap; /* 防止标题文本因空间不足换行 */
}

nav {
  flex: 1; /* 空间充足时填充剩余宽度，空间不足时自动换行并占满整行 */
  display: flex;
  gap: 1rem; /* 导航项之间的间距，可按需调整 */
  flex-wrap: wrap; /* 导航项过多时也能自动换行 */
}

#lang {
  flex-grow: 0;
  flex-shrink: 0;
  margin-left: 1rem; /* 与左侧内容拉开间距 */
}

原理说明 #

• #titre设置flex-shrink: 0和white-space: nowrap，确保标题始终保持自身宽度，不会被压缩或换行。
• nav设置flex: 1，当容器空间充足时，导航栏会填充#titre剩余的宽度，与标题并排；当容器宽度不足以同时容纳标题和导航栏的最小宽度时，导航栏会自动换行，并且因flex: 1占满整行，实现逐行排列的效果。
• 添加gap和align-items属性是为了优化布局的视觉体验，可根据实际需求调整或移除。

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