【HTML】margin-left:autoでdivのようなブロック要素を右寄せにする

次のようにdivのようなブロック要素が3つ横に並んでいるときに、そのうちの1つだけを右に寄せたいとします。

See the Pen
margin-left: autoで要素を右寄せにする part1 by aiiro (@aiiro29)
on CodePen.

<div class="container">
  <div class="box1">Box1</div>
  <div class="box2">Box2</div>
  <div class="box3">Box3</div>
</div>

.container {
  display: flex;
  width: 600px;
  background: #e3e3e3;
  padding: 20px;
  border: #000000 1px solid;
}

.box1 {
  border: #000000 1px solid;
  background: #fff4a2;
}

.box2 {
  margin-left: 10px;
  border: #000000 1px solid;
  background: #fff4a2;
}

.box3 {
  margin-left: 10px;
  border: #000000 1px solid;
  background: #fff4a2;
}

margin-left: autoを設定

こういった場合は、右寄せにしたい要素にCSSでmargin-left: autoを設定すると、右端に寄せることができます。
次の例では、box3のクラスにmargin-left: autoを設定しています。

See the Pen
margin-left: autoで要素を右寄せにする part2 by aiiro (@aiiro29)
on CodePen.

.container {
  display: flex;
  width: 600px;
  background: #e3e3e3;
  padding: 20px;
  border: #000000 1px solid;
}

.box1 {
  border: #000000 1px solid;
  background: #fff4a2;
}

.box2 {
  margin-left: 10px;
  border: #000000 1px solid;
  background: #fff4a2;
}

.box3 {
  margin-left: auto;
  border: #000000 1px solid;
  background: #fff4a2;
}