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-direction: column上使用flex-container-2，您将获得以下内容：

＆＃13;

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

＆＃13;

<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>

＆＃13;

将Flexbox元素也作为flexbox容器

1 个答案: