Flex框为什么要堆叠网格中的项目

Question

我正在使用masonry.js创建图片网格。

我的html是这样的：

<div class="new-starter-grid">
    <div class="new-starter-grid-item"></div>
    <div class="new-starter-grid-item"></div>
    <div class="new-starter-grid-item"></div>
    <div class="new-starter-grid-item"></div>
    <div class="new-starter-grid-item"></div>
    <div class="new-starter-grid-item"></div>
    <div class="new-starter-grid-item"></div>
    <div class="new-starter-grid-item"></div>
    <div class="new-starter-grid-item"></div>
    <div class="new-starter-grid-item"></div>
    <div class="new-starter-grid-item"></div>
    <div class="new-starter-grid-item"></div>
    <div class="new-starter-grid-item"></div>
    <div class="new-starter-grid-item"></div>
    <div class="new-starter-grid-item"></div>
    <div class="new-starter-grid-item"></div>
</div>

为这些元素设置样式的css如下：

.new-starter-grid
{
    top: 20%;
    max-width: 60%;
}

.new-starter-grid-item
{
    float: left;
    width: 120px;
    height: 120px;
    border-radius: 3px;
    background: #D26;
    margin-bottom: 10px;
}

这很完美，并且创建了一个看起来像这样的网格：

我现在正在尝试将网格包装在一个容器中（该容器也会使屏幕变黑）并将其显示在中心。

要做到这一点，我只需将grid元素与另一个div包裹在一起，就像这样：

<div class="new-starter-modal">
    <div class="new-starter-grid">
        <div class="new-starter-grid-item"></div>
        <div class="new-starter-grid-item"></div>
        <div class="new-starter-grid-item"></div>
        <div class="new-starter-grid-item"></div>
        <div class="new-starter-grid-item"></div>
        <div class="new-starter-grid-item"></div>
        <div class="new-starter-grid-item"></div>
        <div class="new-starter-grid-item"></div>
        <div class="new-starter-grid-item"></div>
        <div class="new-starter-grid-item"></div>
        <div class="new-starter-grid-item"></div>
        <div class="new-starter-grid-item"></div>
        <div class="new-starter-grid-item"></div>
        <div class="new-starter-grid-item"></div>
        <div class="new-starter-grid-item"></div>
        <div class="new-starter-grid-item"></div>
    </div>
</div>

然后，我使用以下样式尝试在新div中将网格居中：

.new-starter-modal
{
    position: fixed;
    display: flex;
    justify-content: center;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.9);
    transition: visibility 0s linear 0.25s, opacity 0.25s 0s, transform 0.25s;
    z-index: 9999 !important; /* To make sure no pesky components decide to go on top of the this modal */
}

从技术上讲，网格居中，但最终却将所有项目堆叠如下：

我显然不希望发生这种情况，并且理想情况下希望网格保持与图片一相同，只在水平方向居中（这就是为什么我使用弹性框的原因）。

有人可以向我解释为什么会发生这种情况，以及如何解决该问题吗？

Answer 1

尝试在new-starter-grid上将max-width更改为width。或添加flex：1以与最大宽度一起使用。否则，您的grid元素将没有任何内容指定其宽度，并且可能导致塌陷。 此外，在.new-starter-grid-item上使用浮点似乎可以解决砌筑功能。