我不明白为什么导航栏不会在较小的屏幕上居中。
我认为这与家附近的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时将导航栏居中。
元素ul类导航
在@media only screen and (max-width: 768px) #header-wrapper
中,应添加行align-items: center;