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

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 时，它们的排列方式与pic相关。我该如何解决这个问题？有什么建议吗？

Answer 1

To align items within the header tag you need to add justify-content: flex-end; to the header to read more about it 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>