css - 列/行在屏幕中居中，从左到右排序。 react 灵敏

Question

我试图让我的列/行按照我希望的方式工作。我有四个并排的元素，都排成一排。当屏幕变小并点击元素时，我希望它将它向下推到下一行。目前这很好用。问题是在它将元素向下推到下一行之后，它在第一行之后留下了一个很大的空白区域。假设我使用 Flex 和 Justify 居中，它会“重新居中”并始终将元素保持在中间。这将适用于两行，这很好，因为它删除了当元素向下推到第二行时元素在第一行留下的空白区域。问题是现在第二行的元素在中间。我希望它们从左到右排序。

如果我 Flex Justify Start，它们将从左到右排序，这很好。但这里的问题是，当其中一个元素被向下推时，它会在自己之后留下那个空白空间，并且不会重新居中。

有什么想法吗？

保重

Answer 1

最准确的解决方法可能是这个:

*{
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

.flex-container{
    background: lightgrey;
    height: 100vh;
    margin: 0 auto;
    width: 70%;
    /* Flexbox */
    display: flex;
    flex-wrap: wrap;
    align-content:  center;
    justify-content: space-around;
}

.flex-item{
    background: red;
    border: 4px solid yellow;
    height: 180px;
    margin: 1rem 0;
    width: 30%;
}

这段代码的问题是你每行的第一个和最后一个 flex 元素将在主起点和主终点之后。要模拟它们居中，flex-container 的宽度必须小于 100%。