如何在屏幕<850px时将导航栏标题Valhalla置于其他元素上方

我用HTML和CSS创建了一个简单导航栏，希望在屏幕宽度小于850px时，把其中的"Valhalla"文本移到其他列表元素的上方。

我的代码 #

HTML代码 #

<nav>
  <ul>
    <li><a href = "#">
      <h1>
        <span><i class="fa-solid fa-dumbbell"></i></span>
        <span>Valhalla</span>
        </a>
      </h1>
      </li>
    <li><a href = "#">The Gym</a></li>
    <li><a href = "#">Workouts</a></li>
    <li><a href = "#">Coaches</a></li>
    <li><a href = "#">Supplements</a></li>
  </ul>
</nav>

CSS代码 #

nav {
  font-family: var(--mono);
  font-size: 1rem;
  padding: 1rem;
  background-color: black;
}
nav a {
  text-decoration: none;
  color: var(--white);
}
nav a:hover{
  color: var(--green);
}
nav ul{
  list-style-type: none;
  margin: 0;
  padding: 0;
  display: flex;
  justify-content: center;
  flex-flow: row-wrap;
  align-items: center;
  gap: 1.5rem;
}
nav li:first-child {
  margin-right:auto;
}
.menu-btn {
  display: none;
}

@media (max-width: 850px){
}

我的尝试 #

我尝试设置max-width和flex-basis: 100%来实现标题置顶，但它只移到了导航栏左侧中间位置，没达到置于其他元素上方的效果，尝试的媒体查询代码如下：

@media (max-width: 850px){
  nav{
  max-width: 1200px;
  margin: 0 auto;
  }
  nav li:first-child {
  text-align: center;
  flex-basis: 100%;
}

请问如何正确实现该需求？

解决方案 #

你需要调整flex容器的属性，同时修正第一个列表项的样式，让它占满整行并居中，其他元素自动换行到下方。修改后的媒体查询代码如下：

@media (max-width: 850px){
  nav ul {
    flex-wrap: wrap;
  }
  nav li:first-child {
    margin-right: 0;
    flex-basis: 100%;
    text-align: center;
  }
}

说明 #

1. 确保nav ul的flex-wrap: wrap生效（你原代码的flex-flow: row-wrap已包含此属性，明确写出更直观），保证元素能在空间不足时换行。
2. 移除nav li:first-child的margin-right: auto——这个属性在小屏幕下会强制标题靠左，破坏居中布局，还会阻碍其他元素换行到下方。
3. flex-basis: 100%让标题元素占满整行，后续的列表项自然会被挤到下一行，配合text-align: center实现标题居中显示。

内容的提问来源于stack exchange，提问作者andy.malik