Flex布局头部无法分隔logo与社交图标容器及调整logo尺寸求助

问题复现截图 #

1. 分隔logo与社交图标区域 #

给flex布局的头部父容器.head的子元素.main-header添加flex: 1属性，该属性会让logo容器自动填充父容器剩余空间，自动将左侧导航、中间logo、右侧社交图标三个区域分隔到左、中、右三个独立位置。

2. 不增大头部高度放大logo #

• 给头部容器.head设置固定高度，锁定头部总高度不会被内容撑开
• 将logo的.center类的比例宽度改为固定宽度，按需调整大小只要不超过头部高度即可，不会改变头部总高度
• 清除ul标签的默认内外边距，避免多余缩进撑高头部

调整后完整代码 #

CSS代码

body {
  background-color: #45a29e;
  margin: 0;
  padding: 0;
}

.head {
  background-color: #137B77;
  margin: 0;
  padding: 0 20px;
  align-items: center;
  display: flex;
  height: 70px; /* 可自行调整头部总高度 */
}

.center {
  display: block;
  margin-left: auto;
  margin-right: auto;
  width: 65px; /* 可自行调整logo大小 */
  vertical-align: middle;
}

.main-header {
  display: flex;
  align-items: center;
  flex: 1;
}

.header-menus ul {
  display: flex;
  padding: 0;
  margin: 0;
}

.header-menus ul li {
  list-style: none;
  color: #000000;
}

.header-menus ul li a {
  color: #000000;
  text-decoration: none;
  margin-right: 30px;
  font-size: 15px;
  line-height: 2.0;
  font-family: 'STIX Two Math', serif;
}

.logo-image {
  width: 100%;
}

.social-menu {
  display: flex;
  align-items: center;
  gap: 15px; /* 调整社交图标间距 */
}

HTML代码

<div class="wrapper">
  <header class="head">
    <div class="header-menus">
      <ul>
        <li>
          <a href="">Home</a>
          <a href="">Contato</a>
          <a href="">Portfólio</a>
          <a href="">Localização</a>
        </li>
      </ul>
    </div>
    <div class="main-header">
      <div class="logo-image">
        <img src="https://via.placeholder.com/50" alt="Makeup" class="center">
      </div>
    </div>
    <div class="social-menu">
      <a href="" class="fa fa-facebook">f</a>
      <a href="" class="fa fa-tiktok">t</a>
      <a href="" class="fa fa-instagram">i</a>
    </div>
  </header>
</div>

注：原有放在social-menu内的link标签属于样式引入标签，需要移到HTML文档的head标签中，若要正常显示font-awesome图标，需在head中引入对应的font-awesome样式资源。

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