flex中套flex

在Flex布局中，可以使用嵌套的Flex容器来创建更复杂的布局。通过在父容器中使用flex属性，可以控制子容器的布局方式和相对大小。

例如，以下代码演示了一个包含两个子容器的Flex布局，其中每个子容器也是一个Flex容器：

<style>
    .parent {
        display: flex;
        flex-direction: row; /* 水平布局 */
        justify-content: space-between; /* 子容器水平分散对齐 */
        align-items: center; /* 子容器垂直居中对齐 */
    }

    .child {
        display: flex;
        flex-direction: column; /* 垂直布局 */
        justify-content: center; /* 子元素垂直居中对齐 */
        align-items: center; /* 子元素水平居中对齐 */
        width: 200px;
        height: 200px;
        background-color: #ccc;
    }
</style>

<div class="parent">
    <div class="child">
        <!-- 第一个子容器的内容 -->
    </div>
    
    <div class="child">
        <!-- 第二个子容器的内容 -->
    </div>
</div>

在上面的示例中，`.parent`是父容器，它使用了`display: flex`来创建Flex布局。`