将 Flexbox 容器中除最后一项之外的所有项目左对齐

Question

以下是我的代码，其中我试图将最后一个 div(class="four")向右对齐，并且我正在使用它align-self: flex-end;，但它仍然不会向右对齐。让我知道我在这里做错了什么。

.container {
  display: flex;
  flex-direction: row;
  border: 2px solid blue;
}

.one {
  background: red;
}

.two {
  background: yellow;
}

.three {
  background: pink;
}

.four {
  background: teal;
  display: inline-block;
  align-self: flex-end;
}

<div class="container">
  <div class="one">One</div>
  <div class="two">Two</div>
  <div class="three">Three</div>
  <div class="four">Four</div>
</div>

Answer 1

margin-left:auto;会做这项工作。

主轴中自动边距的一种用途是将弹性项目分成不同的“组”......

.container {
  display: flex;
  flex-direction: row;
  border: 2px solid blue;
}

.one {
  background: red;
}

.two {
  background: yellow;
}

.three {
  background: pink;
}

.four {
  background: teal;
  display: inline-block;
  margin-left:auto;
}

<div class="container">
  <div class="one">One</div>
  <div class="two">Two</div>
  <div class="three">Three</div>
  <div class="four">Four</div>
</div>