CSS Flex导航栏 - 怎么样？

Question

第一次玩Flex并经过大量的阅读和演奏后，我仍然无法解决这个问题。

我想要一个固定的导航栏。但问题很简单，问题是我如何调整第1项以启动项目2＆amp; 3到底？无论我做什么，他们都归为一类。 我相信你能告诉我我的noob错误，所以我说得对 - 谢谢！

.flex-container {
    display: -webkit-flex;
    display: flex;
    -webkit-flex-direction: row;
    flex-direction: row;
    width: 100vw;
    height: 8vh;
    background-color: lightgrey;

}

.flex-item {
    align-self: flex-start;
    -webkit-align-self: flex-end;
}

.item1 {
    background-color: cornflowerblue;
    width: 200px;
    height: 5vh;
    align-self: flex-start;
    -webkit-align-self: flex-start;
}

.item2 {
    background-color: red;
    width: 100px;
    height: 5vh;
    align-self: flex-end;
    -webkit-align-self: flex-end;
}

.item3 {
    background-color: yellow;
    width: 100px;
    height: 5vh;
    align-self: flex-end;
    -webkit-align-self: flex-end;
}

<div class="flex-container">
  <div class="flex-item item1">flex item 1</div>
  <div class="flex-item item2">flex item 2</div>
  <div class="flex-item item3">flex item 3</div>
</div>

Answer 1

您可以移除align-self div上的.flex-item属性，而是将margin-left: auto添加到第二个.flex-item

.flex-container {
  display: -webkit-flex;
  display: flex;
  -webkit-flex-direction: row;
  flex-direction: row;
  width: 100vw;
  height: 8vh;
  background-color: lightgrey;
}

.item1 {
  background-color: cornflowerblue;
  width: 200px;
  height: 5vh;
}

.item2 {
  background-color: red;
  width: 100px;
  height: 5vh;
  margin-left: auto;
}

.item3 {
  background-color: yellow;
  width: 100px;
  height: 5vh;

}

<div class="flex-container">
  <div class="flex-item item1">flex item 1</div>
  <div class="flex-item item2">flex item 2</div>
  <div class="flex-item item3">flex item 3</div>
</div>