css - Flexbox:多个容器， flex 元素上的容器？

Question

使用多个 flex 容器，实际上是在 flex 元素上使用 flex 容器是不好的做法吗？

我有一个分配了 display:flex 的主 div，然后我有两个 div，并且分配了一个 flex-grow: 1，这样它们每个都恰好填充了 50%。

现在在每个 DIV 中，我有更多的 DIV，里面有内容，但我希望垂直对齐这些内容，所以我也可以在上面应用 display:flex 吗？

也许我对 flexbox 过于偏执了？

我最近发现了 flexbox，对我来说它似乎解决了很多 css 问题，所以我经常使用它。

Answer 1

您可以在下面的示例中使用它

        .main {
            display: flex;
        }
        .child {
            flex:1;
            border:1px solid tomato;
        }
        .content {
            display: flex;
            justify-content: flex-start;
            align-items: center;
            flex-flow: column nowrap;
        }
        .content-child{
            padding: 5px;
        }

<div class="main">
    <div class="child">
        <div class="content">
            <div class="content-child">
                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
                tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
                quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
                consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
                cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
                proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
            </div>
            <div class="content-child">
                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
                tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
                quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
                consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
                cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
                proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
            </div>
        </div>
    </div>
    <div class="child"></div>
</div>