我希望两端对齐 img 和 nav 标签答案

【问题标题】：I want to be both ends aligned the img and nav tags我希望两端对齐 img 和 nav 标签
【发布时间】：2022-01-25 13:14:38
【问题描述】：

现象 img标签和nav标签不合理。

预期值 我希望两端对齐 img 和 nav 标签。

复制步骤 请运行下面的代码。

.header {
    .header__wrapper {
        display: flex;
        flex-direction: row;
        align-items: center;
        width: 960px;
        height: 60px;
        padding: 0px 76.1095px;
        margin: 0px 471.5px;
        justify-content: space-evenly;
        img {
             /* omitted */
        }
        nav {
　　　　　　　 /* omitted */
                .header__nav-link {
　　　　　　　　　/* omitted */
                }
            }
            .header__nav-li_bicycle {
                list-style: none;
                width: 74.695px;
                .header__nav-link_bicycle {
                /* omitted */
                }
            }
        }
    }
}

<header class="header">
        <div class="header__wrapper">
                <img class="header__profile-icon" src="image/logo.svg" alt="プロフィール">
            <nav class="header__nav">
                <li class="header__nav-li"><a href="" class="header__nav-link">About</a></li>
                <li class="header__nav-li_bicycle"><a href="" class="header__nav-link_bicycle">Bicycle</a></li>
            </nav>
        </div>
</header>

【问题讨论】：

标签： html css sass flexbox

【解决方案1】：

您可以尝试使用以下纯 CSS 来实现您想要的结果。我添加了一些弹性框并对齐项目，使它们的空间与您的图像大致相同。请参阅下面的 CSS 更改。

.header {
  display: flex;
  flex-direction: row;
  align-items: center;
  width: 960px;
  justify-content: space-evenly;
  width: 100%;
}

li {
  list-style-type: none;
}

ul {
  display: flex;
  gap: 20px;
}

.header__wrapper {
  display: flex;
  align-items: center;
  gap: 30vw;
}

<header class="header">
  <div class="header__wrapper">
    <img class="header__profile-icon" src="image/logo.svg" alt="プロフィール">
    <nav class="header__nav">
      <ul>
        <li class="header__nav-li"><a href="" class="header__nav-link">About</a></li>
        <li class="header__nav-li_bicycle"><a href="" class="header__nav-link_bicycle">Bicycle</a></li>
      </ul>
    </nav>
  </div>

【讨论】：