How can I get a layout like this using flexbox?-CodePudding

I was practicing on my layouts using flexbox and was trying to make a layout like the one attached. I just can’t seem to get it. Any help would be appreciated. layout image

CodePudding user response：

Despite this question being pretty low quality, It is a Sunday and I need some CSS practice, here is my solution, anyone more experienced please feel free to edit or add some suggestions.

View in full page for actual result as in the image.

    .flex-master {
            display: flex;
            flex-direction: row;
            border-style: solid;
            border: 10px solid;
            height: 60%;
            width: 80%;
            
        }

        .flex-1 {
            flex: 6;
            border: 2px solid;
        }

        .flex-2 {
            display: flex;
            flex: 6;
            border: 2px solid;
            flex-direction: column;
            flex-wrap: wrap;
        }

        .flex-3 {
            flex: 9;
            border: 2px solid;
        }

        .flex-4 {
            flex: 3;
            display: flex;
            border: 2px solid;
            flex-direction: row;
            flex-wrap: wrap;   
        }

        .flex-5 {
            flex: 2;
            border: 2px solid;
        }

        .flex-6 {
            flex: 10;
            border: 2px solid;
        }

    <div class="flex-master">
            <div class="flex-1">
                <h1>Red Dress Image</h1>
            </div>
            <div class="flex-2">
                <div class="flex-3">
                    <h1>A Red Dress</h1>
                </div>
                <div class="flex-4">
                    <div class="flex-5">
                        <h1>100k Customers</h1>
                    </div>
                    <div class="flex-6">
                        <h1>New Collection</h1>
                    </div>
                </div>
            </div>