CSS 3つの要素を左揃え・中央揃え・右揃えで配置したい

Question

3つの要素をそれぞれ左揃え・中央揃え・右揃えで配置したいのですがどうすれば良いでしょうか。
Flexboxのspace-betweenを使って近い状態に出来たのが下記のコードです。
赤は左揃え、青は右揃えで希望通りなので、この状態で緑を全体の中央揃えになるようにしたいです。
htmlについて勉強し始めたばかりで、便利なFlexboxばかりを使用してしまっているのですが、他のレイアウトでも構いません。

<div id="box" style="width: 1000px; height:100px; background:black;">
  <div id="red" style="width: 400px; height:100px; background:red;"></div>
  <div id="green" style="width: 100px; height:100px; background:green;"></div>
  <div id="blue" style="width: 100px; height:100px; background:blue;"></div>
</div>

#box {
  display: flex;
  justify-content: space-between;
}

Answer 1

質問者さんの実現したいことは、以下のように行なえると思います(動作確認用リンク)。

#box {
  display: flex;
  justify-content: space-between;
  position: relative;
}

#green {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
}

Comments

[brsice]

目的のレイアウトにできました。
ありがとうございます。
他の人のコードを見ても、他の配置を調整するプロパティに対してpositionがどう機能するかいまいち理解できていなかったのですが、使い所が分かった気がします。