html - Angular：无法在 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>

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

#状态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 并排。任何想法？

标签： htmlcssangulartwitter-bootstrapprimeng

Answer 1

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

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