Flexboxを使って、

下の画像（画像A）のような場合に
１と２のみを1行目におき
３と４を下端に持って行くというようなこと（画像B）はできませんか？

.containerの幅に追従して、
2のみが右端によっているような状態です。

今、2にのみmargin-left:auto;を
設定しています。

justify-selfとかってないのですかね？

【画像A】
A

↓↓↓↓↓↓

【画像B】
B

[html]

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title></title>
    <link rel="stylesheet" href="styles.css">
  </head>
  <body>
    <div class="container">

      <div class="box box_1">
        1
      </div>

      <div class="box box_2">
        2
      </div>

      <div class="box box_3">
        3
      </div>

      <div class="box box_4">
        4
      </div>

    </div>

  </body>
</html>

[css]

@charset "UTF-8";

.container{
  height: 600px;
  width: 600px;
  background: #ccc;
  display: flex;
  flex-wrap: wrap;
}

.box{
  width: 100px;
  height: 100px;
}

.box_1{
  background: skyblue;

}
.box_2{
  background: lime;
  margin-left: auto;
}
.box_3{
  background: yellow;

}
.box_4{
  background: tan;

}

ちなみに下のCSSのように
３と４に

align-self:flex-end;

としてもうまくいきません。【画像C】

【画像C】
画像の説明をここに入力
[css]

@charset "UTF-8";

.container{
  height: 600px;
  width: 600px;
  background: #ccc;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}

.box{
  background: tomato;
  height: 100px;
}

.box_1{
  background: skyblue;
  width: 100px;
}

.box_2{
  background: lime;
  width: 100px;
  margin-left: auto;
}

.box_3{
  background: yellow;
  width: 100px;
  align-self: flex-end;
}

.box_4{
  background: tan;
  width: 100px;
  align-self: flex-end;
}