Angular：无法在 PrimeNG FlexGrid 中并排定位两个 p-col-6

Question

我在我的 Angular7 项目中使用 Flex Grid 但是虽然在第一种情况下行为正常，并且我可以并排定位两个 p-col-6，但我无法在移动后并排放置它们他们在 p-col-12。问题是：

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

但即使更改宽度属性也无法并排显示 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>

Angular：无法在 PrimeNG FlexGrid 中并排定位两个 p-col-6

Angular : Cannot locate two p-col-6 side by side in PrimeNG FlexGrid

html

css

twitter-bootstrap

primeng

angular