角度：无法在PrimeNG FlexGrid中并排放置两个p-col-6

Question

我在Angular7项目中使用Flex Grid，但是尽管在第一种情况下行为正常，并且可以并排放置两个p-col-6，但在将它们移入后无法并排放置p-col-12。这是问题所在：

＃状态1：

<style>
    .p-grid {
        border: 2px solid red;
        padding: 10px;
        display: flex;
        flex-wrap: wrap;
        box-sizing: border-box;
    }

    .p-col-6 {
        box-sizing: border-box;
        padding: 20px;
        border: 2px solid green;
        flex: 1 0 50%; 
        margin-bottom: 5px;
        max-width: 50%;
    }
</style>

<div class="p-grid">
    <div class="p-col-6">
    </div>

    <div class="p-col-6">
    </div>

    <div class="p-col-6">
    </div>

    <div class="p-col-6">
    </div>
</div>

这里没有问题。但是当使用如下所示的方法时，会出现问题：

#status 2：

<style>
    * {
        -webkit-box-sizing: border-box;
    }

    .p-grid {
        border: 2px solid red;
        padding: 10px;
        display: flex;
        flex-wrap: wrap;
        box-sizing: border-box;
    }

    .p-col-6 {
        box-sizing: border-box;
        padding: 20px;
        border: 2px solid green;
        flex: 1 0 50%; 
        margin-bottom: 5px;
        max-width: 50%;
    }

    .p-col-12 {
        box-sizing: border-box;
        padding: 20px;
        border: 2px solid green;
        flex: 1 0 100%;
        margin-bottom: 5px;
        max-width: 100%;
    }
</style>

<div class="p-grid">
    <div class="p-col-12">
        <div class="p-col-12">12</div>

    </div>

    <div class="p-col-12">
        <div class="p-col-12">12</div>
    </div>

    <div class="p-col-12">
        <div class="p-col-6">
            6
        </div>
        <div class="p-col-6">
            6
        </div>
    </div>
</div>

但是即使更改width属性，也不能使col-6并排放置。有想法吗？

Answer 1

问题是您添加的嵌套导致.p-col-6不再是flexbox父项.p-grid的子级。相反，.p-col-6是一个块级元素，不会像典型的行方向flex子元素那样并排对齐。

<div class="p-grid">                   /* <-- flexbox  parent */
    <div class="p-col-12">             /* <-- flexbox  child */
        <div class="p-col-12">12</div>
    </div>

    <div class="p-col-12">             /* <-- flexbox  child */
        <div class="p-col-6">          /* <-- NOT a flexbox child */
            6
        </div>
        …
    </div>
</div>