Css 如何在flex或grid中显示此设置？

我正在尝试使用4div在flex中获得这个结果。我展示了我的容器：flex；如何得到这个结果

        <div class="pictures">
            <div class="big"></div>
            <div class="small"></div>
            <div class="small"></div>
            <div class="bottom"></div>
        </div>

---

您缺少的概念是柔性方向。它告诉flex box以行或列的形式布局子对象。你只需要使用它，并将它们嵌套

试试看！反对票是因为您的问题中没有提供代码。欢迎来到StackOverflow，到目前为止您尝试了什么？这是一个非常简单的任务，网上有几个例子。太棒了，TJ，它能工作！

<div style="display: flex; flex-direction: row;">
    <girl/>
    <div style="display: flex; flex-direction: column;">
        <div style="display: flex; flex-direction: row;">
            <horizontal lines image/>
            <vertical lines image/>
        </div>
        <sweet escape image/>
    </div>
</div>