我该如何编写这个 CSS Flexbox 布局？ [关闭]

Posted 2023-03-05

【中文标题】我该如何编写这个 CSS Flexbox 布局？ [关闭]

【英文标题】：How can i write this CSS Flexbox layout? [closed]

【发布时间】：2016-02-05 08:27:50

【问题描述】：

如何编写这个 CSS Flexbox 布局？

【问题讨论】：

欢迎来到 Stack Overflow。尝试自己构建它。如果/当您遇到问题时，请在此处发布您的代码并附上问题的描述，我们会尽力帮助您。 Stack Overflow 是一个问答服务，而不是“从头开始”的代码编写服务。以下是更多指南：***.com/help/mcve

我所知道的任何事情都不会处理同一行容器内其他四个匹配高度左侧的框。有可能吗？

使用 flexbox 绝对可以。查看嵌套的弹性盒。您还需要将右上角和左下角的弹性项目放入弹性容器中。你需要flex-wrap: wrap。祝你好运。

嵌套网格。在上面。迈克·麦考恩，粗鲁。

【参考方案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>