html - 作为 Flexbox 容器的 Flexbox 元素

Question

//原谅我初学英语

您好! 我可以实现以下构造:

<div class="flex-container-1">
    <div class="flex-element-1 flex-container-2">
        <div class="flex-element-2">...</div>
        <div class="flex-element-2">...</div>
    </div>
    <div class="flex-element-1 flex-container-2">
        <div class="flex-element-2">...</div>
        <div class="flex-element-2">...</div>
    </div>
</div>

我的简单尝试:

.flex-container-1, .flex-container-2 {
    display: flex;
}
.flex-element-1, .flex-element-2 {
    flex: auto;
}

...不正确。

使它更扁平对我来说不是办法，因为我需要分组容器。

有什么想法吗？

谢谢!

Answer 1

我不知道你想做什么，但在你的例子中，你只在容器上使用 display: flex 。 flex 盒子有更多的可能性，你可以在这里阅读:http://css-tricks.com/snippets/css/a-guide-to-flexbox/

例如，如果您在 flex-container-2 上使用 flex-direction: column，您将得到如下内容:

.flex-container-1, .flex-container-2 {
    display: flex;
    
}
.flex-container-2 {
    flex-direction: column;
}
.flex-element-1, .flex-element-2 {
    flex: auto;
}

<div class="flex-container-1">
    <div class="flex-element-1 flex-container-2">
        <div class="flex-element-2">1...</div>
        <div class="flex-element-2">1...</div>
    </div>
    <div class="flex-element-1 flex-container-2">
        <div class="flex-element-2">2...</div>
        <div class="flex-element-2">2...</div>
    </div>
</div>