CSS Flex实现图片居左、导航栏居右且垂直居中布局

需求 #

• 图片位于页面左侧
• 导航栏位于页面右侧
• 导航栏与图片保持垂直居中对齐
• 现有代码已完成垂直居中配置，仅需调整导航栏右对齐

注：示例使用谷歌图片作为占位资源。

现有代码 #

CSS #

ul {
  display: flex;
  list-style-type: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
  align-items: center;
}

ul img {
  height: 100px;
}

li a {
  display: block;
  color: #262353;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
}

HTML #

<ul>
  <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/7/77/Google_Images_2015_logo.svg/640px-Google_Images_2015_logo.svg.png">
  <li><a class="active" href="#">test</a></li>
  <li><a href="#">test2</a></li>
  <li><a href="#">test3</a></li>
  <li><a href="#">test4</a></li>
</ul>

修复方法 #

现有flex容器已经配置align-items: center实现了垂直居中，要实现左右分布有两种简单方案：

方案1：最小改动（无需调整HTML结构） #

利用flex布局的margin自动填充特性，给图片添加margin-right: auto，自动占满图片右侧的剩余空间，把后续所有导航项推到容器最右侧，仅需修改图片的CSS规则：

ul img {
  height: 100px;
  margin-right: auto; /* 新增此行即可 */
}

方案2：规范语义结构（推荐） #

ul标签的直接子元素仅允许为li，原有HTML结构不符合规范，建议先调整结构，再通过flex两端对齐实现布局：

1. 调整HTML结构，将图片包裹进独立的li，所有导航链接归为一组
2. 给ul容器添加justify-content: space-between实现两端对齐
3. 导航组内部也用flex布局，保持横向排列

修正后完整代码：

CSS

ul {
  display: flex;
  list-style-type: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
  align-items: center;
  justify-content: space-between; /* 新增两端对齐 */
}

.nav-group {
  display: flex;
}

ul img {
  height: 100px;
}

li a {
  display: block;
  color: #262353;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
}

HTML

<ul>
  <li class="logo-item">
    <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/7/77/Google_Images_2015_logo.svg/640px-Google_Images_2015_logo.svg.png">
  </li>
  <li class="nav-group">
    <a class="active" href="#">test</a>
    <a href="#">test2</a>
    <a href="#">test3</a>
    <a href="#">test4</a>
  </li>
</ul>

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