我该如何编写这个CSS Flexbox布局？

Question

如何编写此CSS Flexbox布局？

Answer 1

使用嵌套网格绑定它。

Screenshot - Click image to view full size.]

这里有

MARKUP和CSS：

        <div class="flex flex-twin">
            <div class="box double">first box</div><!-- end box -->
            <div class="box">
                <div class="flex flex-twin">
                    <div class="box">second</div><!-- end box -->
                    <div class="box">third</div><!-- end box -->
                </div><!-- end flex-twin -->
                <div class="flex flex-twin">
                    <div class="box">fourth</div><!-- end sub box -->
                    <div class="box">fifth</div><!-- end sub box -->
                </div><!-- end flex-twin -->
            </div><!-- end box -->
        </div><!-- end flex-twin -->

        <style>
            .flex {
                display: flex;
                justify-content: space-between;
                &.flex-twin {
                    .box {
                        width: 50%;
                        height: 200px;
                        background: #ccc;
                        &.double {
                            height: 400px;
                        }
                        .flex {
                            &.flex-twin {
                                .box {
                                    background: #aaa;
                                } // end box
                            }  // end flex-twin
                            .box {

                            } // end box
                        } // end flex
                    } // end box
                } // end flex-twin
                .box {

                } // end box
            } // end flex
        </style>