CSS - Como usar o flexbox layout para posicionar elementos

<html lang="pt-br">
    <head>
        <meta name="viewport" content="user-scalable=no, width=device-width, initial-scale=1, maximum-scale=1">
        <meta charset="utf-8">
        <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.15.4/css/all.css" integrity="sha384-DyZ88mC6Up2uqS4h/KRgHuoeGwBcD4Ng9SiP4dIRy0EXTlnuz47vAwmeGwVChigm" crossorigin="anonymous">
        <style>
            .my-box{
                border: 2px solid black;
                border-radius: 10px;
                width: 500px;
                height: 100px;
                padding-top: 40px;
                margin-left: auto;
                margin-right: auto;
                display: flex; /* define um contexto flex para os filhos */
                justify-content: space-evenly;
            }
            .my-box-item{
                width: 110px;
                height: 50px;
            }
        </style>
    </head>
    <body>
        <div class="my-box">
            <button class='my-box-item'><i class="fas fa-play fa-2x"></i>Testar</button>
            <button class='my-box-item'><i class="fas fa-sign-in-alt fa-2x"></i>Logar</button>
            <button class='my-box-item'><i class="fas fa-user-plus fa-2x"></i>Cadastrar</button>
        </div>
    </body>
</html>