Flex导航栏不在768像素或更小的屏幕上居中

问题描述 投票:0回答:1

我不明白为什么导航栏不会在较小的屏幕上居中。

我认为这与家附近的nav ul的空间有关(以及我缺乏灵活的知识)。

[这里有一支笔,您可以用它收缩窗口,看到家旁边的剩余空间不会变小,并且水平导航栏不会居中。

#header-wrapper {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-items: baseline;
  border: solid black;
  flex: 1;
  background-image: url(fresh-snow.png);
  background-color: #480459;
  color: white;
}

nav {
  border: solid;
  display: flex;
  flex: 4;
}

nav ul {
  border: solid;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  list-style-type: none;
  flex: 1;
  justify-content: space-evenly;
}
<div id="header-wrapper">
  <hgroup>
    <h1>Marina Heide</h1>
    <h2>Översättare</h2>
    <h3>från svenska, norska, danska till franska</h3>
  </hgroup>
  <nav>
    <ul class="navigation">
      <li><a href="#">home</a></li>
      <li><a href="#">kontakta mig</a></li>
      <li><a href="#">vem jag är</a></li>
    </ul>
  </nav>
</div>
<div id="main"> .
  <p>Jag översätter böcker, webbsidor, serier och filmer.
    <p>
</div>

https://codepen.io/cykelcykel/pen/eYYBMpq

我希望在将flex-direction设置为column时将导航栏居中。

html css flexbox
1个回答
0
投票

元素ul类导航


0
投票

@media only screen and (max-width: 768px) #header-wrapper中,应添加行align-items: center;

© www.soinside.com 2019 - 2024. All rights reserved.