我正在为我的个人网站创建菜单，并且喜欢在flexbox中构建它，并使它也负责。在flexbox上观看了几个视频，认为我已经接近最后阶段了。
我想实现什么？ 导航栏包含图像，带下拉菜单的菜单按钮和社交媒体按钮。我有点陷在两个方面：
以使菜单按钮更居中，或者如果需要，可以更向左移。
当屏幕调整为小屏幕时，将堆叠的项目和裸露的菜单缩小为单个菜单按钮，单击该按钮即可打开菜单。
我制作了一个Codepen来展示到目前为止的内容。 Codepen
HTML
<div class="wrapper">
<header>
<div class="header-container">
<a href="#" >
<img class="logo" src="https://www.freeiconspng.com/uploads/sailing-boat-png-29.png" alt="Sailboat" >
</a>
<nav class="main-menu">
<a href="#" class="toggleNav">= Menu</a>
<a class="menu-button" href="#">Welcome</a>
<div class="dropdown-wrapper menu-button">
<a class="menu-button" href="#">About me</a>
<div class="drop-menu fade-in effect">
<a class="menu-button" href="#">Menu A</a>
<a class="menu-button" href="#">Menu B</a>
<a class="menu-button" href="#">Menu C</a>
</div>
</div>
<div class="dropdown-wrapper menu-button">
<a class="menu-button" href="#" >Portfolio</a>
<div class="drop-menu fade-in effect">
<a class="menu-button" href="#">Menu K</a>
<a class="menu-button" href="#">Menu L</a>
<a class="menu-button" href="#">Menu M</a>
<a class="menu-button" href="#">Menu N</a>
<a class="menu-button" href="#">Menu O</a>
<a class="menu-button" href="#">Dropdown</a>
</div>
</div>
<div class="dropdown-wrapper menu-button">
<a class="menu-button" href="#" >Contact</a>
<div class="drop-menu">
<a class="menu-button" href="#">Sub</a>
<a class="menu-button" href="#">Sup</a>
<a class="menu-button" href="#">Board</a>
</div>
</div>
<ul>
<li class="social">
<a href="https://www.facebook.com/uisgebeatha.eu/" target="_blank" rel="noopener">
<i class="fa fa-facebook"></i>
</a>
</li>
<li class="social">
<a href="https://twitter.com/GJdeGraaf" target="_blank" rel="noopener">
<i class="tw fa-twitter"></i>
</a>
</li>
<li class="social">
<a href="https://nl.pinterest.com/gjdgraaf/uisge-beatha/" target="_blank" rel="noopener">
<i class="fa fa-pinterest"></i>
</a>
</li>
<li class="social">
<a href="rssfeed.rss" target="_blank" rel="noopener">
<i class="fa fa-rss"></i>
</a>
</li>
</ul>
</nav>
</div>
</header>
<div id="main">
<div class="content">
<h1>Content</h1>
<p>Text</p>
</div>
</div>
</div>
CSS
/* ==========================================
RESET
===========================================*/
* {
box-sizing: border-box;
list-style-type: none;
padding: 0;
margin: 0;
text-decoration: none;
}
/*====================================
BASE STYLES
====================================*/
body {
background: #333;
}
* {
font-family: 'Vollkorn', Arial, serif;
font-size: 1em;
}
#main {
background-color: #ddd;
padding-top: 120px;
min-height:500px;
margin-left: 60px;
margin-right: 60px;
}
.content {
margin-top: 100px;
}
p {
margin-bottom: 30px;
}
.wrapper {
max-width: 100%;
}
/*====================================
HEADER STYLES
====================================*/
header {
background: #e9e9e9;
box-shadow: 0px -3px 15px 2px;
display:flex;
}
.header-container {
background: #eee;
width: 100%;
margin: auto;
display: flex;
flex-direction: column; /* Logo starts stacked on top of nav */
align-items: center;
position:fixed; /* headeralign-content on top of the screen to have content scrolling away behind the nav bar */
}
.logo {
max-width: 120px;
max-height: 120px;
margin-top: 10px;
}
/*====================================
MENU STYLES
====================================*/
.main-menu {
width: 100%;
display: flex;
flex-direction: row;
flex-wrap: nowrap;
margin-top: 25px; /* Space for logo */
overflow: visible;
max-width: 700px; /* Keeps the buttons getting too far from each other on largest screens */
}
.main-menu .toggleNav {
display: none;
}
.main-menu a {
width: 100%;
text-align: center;
padding: .75em 1em;
display: block;
color: blueviolet;
border-bottom: 2px solid #ddd;
}
.main-menu a:hover {
color: #c14400;
border-bottom-color: #c14400;
}
/*====================================
DROPDOWN MENU STYLES
====================================*/
/* The hidden-at-first drop menus */
.drop-menu {
display: flex;
flex-direction: column; /* This never changes */
align-items: center;
width: 100%; /* Allows sub buttons to stretch across button width in main-menu*/
transition: max-height .4s, opacity .3s;
max-height: 0;
opacity: 0;
overflow: hidden; /* Keeps links in drop menu from displaying until height is large enough */
}
.drop-menu > .menu-button {
height: 100%;
transition: transform .4s;
transform: translateY(-300%);
background: #aaa; /* Makes the menu effects visible on close */
}
/* Makes for easy identifying when the drop menu is open */
.dropdown-wrapper:hover > .menu-button {
color: #c14400;
background: #333;
}
/* The dropdown-wrapper wraps both the .main-menu button and drop down menu */
/* Expands .drop-menu to children height, not setting an expicit height allows variable # of buttons */
.dropdown-wrapper:hover .drop-menu {
max-height: 300px;
opacity: 1;
}
/* The specifity keeps styles from affecting main menu button */
.dropdown-wrapper:hover > .drop-menu .menu-button {
transform: translateY(0%);
}
/*====================================
Social media buttons
=====================================*/
.main-menu ul {
background-color: yellow;
list-style: none;
margin: 0;
padding: 0;
display: flex;
flex-direction: row;
justify-content: space-around;
flex: 1;
}
.main-menu li {
flex: 3;
}
.main-menu social {
flex: 1;
}
/*====================================
MEDIA QUERIES
====================================*/
@media all and (max-width:500px) {
.main-menu li {
flex-basis: 100%
}
.wrapper {
display: flex;
flex-direction: column;
}
.wrapper > * {
order: 5000;
}
.main-menu {
order: 1;
}
.toggleNav: {
display: block;
}
.main-menu ul {
display: none;
}
.main-menu ul.open {
display: flex;
}
}
@media (min-width: 550px) {
/*====================================
DROP-MENU EFFECTS (LARGER SCREENS)
====================================*/
/* Resets dropdown styles to not affect the effects. Overflow still set to hidden allows for menu effects like sliding in */
.effect {
transition: max-height 0s;
opacity: 1;
background: transparent;
}
.effect .menu-button {
transform: translateY(0%);
}
.fade-in .menu-button {
transition: opacity .5s;
opacity: 0;
}
.dropdown-wrapper:hover .fade-in .menu-button {
opacity: 1;
}
.header-container {
width: 100%;
}
.header-container {
height: 160px;
justify-content: space-between; /* Pushes logo to top, nav bar all the way down */
}
.main-menu {
flex-direction: row; /* Horizontal main menu buttons */
align-items: flex-start; /* Makes the top of the 'dropdown-wrapper' div stay flush with button top because it's aligned on the cross-axis */
height: 48px; /* Setting the height allows the dropdown outside of it's parent's bounds, therefore not compensated for by the flex. */
margin: 0;
flex-wrap:nowrap;
}
.main-menu > .menu-button {
width: 23%;
max-width: 150px;
}
.logo {
max-width: 130px;
max-height: 130px;
margin-top: 15px;
}
}
@media (min-width: 850px) {
.header-container {
flex-direction: row; /* Places logo on the same line as .main-menu */
justify-content: space-around;
height: 160px;
}
.main-menu {
width: 60%;
justify-content: space-between;
}
.logo {
margin: 0;
}
}
任何帮助当然都受到赞赏！