ブートストラップ 自動マージン（Auto margins) ml-autoがきかない

Question

<div class="d-flex bd-highlight mb-3">
  <div class="p-2 bd-highlight">Flex item</div>
  <div class="p-2 bd-highlight">Flex item</div>
  <div class="ml-auto p-2 bd-highlight">Flex item3</div>
</div>

ブートストラップの公式ドキュメントを参考に要素 item3を一番右に配置しようとしていますが
ml-autoが効かずitem3が一番左に配置されません。
cdnは下のコードを使っています

<!-- CSS only -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-giJF6kkoqNQ00vy+HMDP7azOuL0xtbfIcaT9wjKHr8RbDVddVHyTfAAsrekwKmP1" crossorigin="anonymous">

試した事

   <div class="container box">
        <div class="bg-success">One</div>
        <div class="bg-primary">Two</div>

        <div class="push bg-danger">Four</div>

    </div>

   <style>
        .box {
            display: flex;
        }
        .push {
            margin-left: auto;
        }
    </style>

ブートストラップなしで上のコードやるとうまくいきます。
見比べても悪いところが分かりませんでした
すみませんが回答よろしくお願いします

Answer 1

4から5でクラス名が変わっているようですね。
ml-auto→ms-auto

s - for classes that set margin-left or padding-left in LTR, margin-right or padding-right in RTL

Spacing(スペーシング) · Bootstrap v5.0

Comments

[kazumad]

ありがとうございました。
left がstartに変わったんですね。
mxはそのままみたいですね。

[Lhankor_Mhy]

論理プロパティを参照したのでしょうね（縦書きはどうするんだろ）。

お役に立てたようで何よりです。