如何将项目左对齐（标题）

Question

我正在尝试将一些项目向左对齐，但我不知道我做错了什么。 我正在制作 youtube 标题，而此时，我已经完成了这个

我必须使用简单的填充将前两项向右对齐，但是当涉及到标题的左侧时，没有任何效果。我用过 align-items 但它们不动。

这是我的 html 代码：

header {
  width: 100%;
  padding: 0px;
  /*FLEX*/
  display: flex;
  flex-direction: row;
  border-bottom: 1px solid #000;
}

header .youtube nav a span {
  color: red;
  padding: 5px;
  line-height: 50px;
}

header .menu nav a span {
  padding: 30px;
  line-height: 50px;
}

header .bloque nav a span {
  line-height: 50px;
  align-items: flex-end;
}

header .bloque nav img {
  line-height: 50px;
  align-items: flex-end;
  width: 50;
}

<header>
  <div class="menu">

    <nav>
      <a href="#"><span class="icon-menu"></span></a>
    </nav>
  </div>
  <div class="youtube">
    <nav>
      <a href="#"><span class="icon-youtube"></span>YouTube</a>
    </nav>
  </div>
  <form>
    <fieldset>
      <input type="search" placeholder="Search">
      <button type="submit">
							<span class="icon-magnifying-glass"></span>
						</button>
    </fieldset>
  </form>
  <div class="bloque">
    <nav>
      <a href="#"><span class="icon-camera"></span></a>
      <a href="#"><span class="icon-grid"></span></a>
      <a href="#"><span class="icon-forward"></span></a>
      <a href="#"><span class="icon-globe"></span></a>
      <img src="guía.png" width="100">
    </nav>
    <div/>
</header>

当我使用 justify-content:Space-round 时，项目按我想要的方式放置，但它们之间的间距不正确。但是由于某些奇怪的原因，当我使用 align-item:flex-end 时，它们的排列方式与图片相关。我该如何解决这个问题？有什么建议吗？

Answer 1

要对齐 header 标记中的项目，您需要将 justify-content: flex-end; 添加到标题以阅读更多信息 Check this site

header {
  width: 100%;
  padding: 0px;
  /*FLEX*/
  display: flex;
  flex-direction: row;
  justify-content: flex-end;
  /* justify-content: flex-end;*/  /*uncomment to align left*/
  align-items: center; /* to vertical align items */
  border-bottom: 1px solid #000;
}

header .youtube nav a span {
  color: red;
  padding: 5px;
  line-height: 50px;
}

/* header .menu nav a span {
  padding: 30px;
  line-height: 50px;
} */

header .bloque nav a span {
  line-height: 50px;
  align-items: flex-end;
}

header .bloque nav img {
  line-height: 50px;
  align-items: flex-end;
  width: 50;
}

<header>
  <div class="menu">

    <nav>
      <a href="#"><span class="icon-menu"></span></a>
    </nav>
  </div>
  <div class="youtube">
    <nav>
      <a href="#"><span class="icon-youtube"></span>YouTube</a>
    </nav>
  </div>
  <form>
    <fieldset>
      <input type="search" placeholder="Search">
      <button type="submit">
							<span class="icon-magnifying-glass"></span>
						</button>
    </fieldset>
  </form>
  <div class="bloque">
    <nav>
      <a href="#"><span class="icon-camera"></span></a>
      <a href="#"><span class="icon-grid"></span></a>
      <a href="#"><span class="icon-forward"></span></a>
      <a href="#"><span class="icon-globe"></span></a>
      <img src="guía.png" width="100">
    </nav>
    <div/>
</header>