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

Posted 2023-03-05

【中文标题】如何使用 flexbox 获得这样的布局？

【英文标题】：How can I get a layout like this using flexbox?

【发布时间】：2021-11-24 04:45:33

【问题描述】：

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

【问题讨论】：

您好，我会尝试提供帮助，但在我有机会编写代码之前，这个问题可能会被关闭。看看这里如何询问堆栈溢出问题：***.com/tour 同时，您的解决方案是嵌套弹性框并混合行和列。看看这个资源：quackit.com/css/flexbox/tutorial/nested_flex_containers.cfm

谢谢！但是为什么会关机呢？抱歉，刚开始使用堆栈溢出。我查看了您发送的旅游链接，但不明白他们为什么要关闭它。

没有足够的信息，没有代码示例，这将被大多数堆栈溢出社区视为低工作量。您可以编辑您的帖子以添加更多信息。希望这对你有帮助！

这确实被认为是非常低的努力。 Stack Overflow 不是编码服务。向我们展示您的尝试以及您遇到的问题，然后我们可以将您推向正确的方向。

明白..谢谢

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