如何使用 flexbox 获得这样的布局？

Question

我正在使用 flexbox 练习我的布局，并试图制作一个与附件类似的布局。我就是不明白。任何帮助，将不胜感激。 layout image

Answer 1

尽管这个问题质量很低，但今天是星期天，我需要一些 CSS 练习，这是我的解决方案，有经验的人请随时编辑或添加一些建议。

查看完整页面以查看图片中的实际结果。

    .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>

如何使用 flexbox 获得这样的布局？

How can I get a layout like this using flexbox?

html

layout

flexbox