如何通过flex进行网页布局

<style>

    *{

        margin: 0;

        padding:0;

    }

    .grid{

        display: flex;

        border: 1px solid #ccc;

    }

    .left{

        background-color:pink;

        flex-basis: 200px;

}

    .right{

        background-color:skyblue;

        flex-basis:calc(100% - 200px);

    }

</style>