html - 居中对齐 HTML 元素，同时从左侧添加新元素

Question

我有一个包含未知数量的小 div 的父 div，这些 div 用作类似大图标的按钮。如果一行子 div 已满，我希望它们每边的边距相等(即居中)，但如果一行未满，我希望它们从左侧填充(但仍在列中)与上述元素)。有没有办法用 CSS 做到这一点？调整窗口大小应保持居中并根据需要添加/删除列。所有子 div 宽度都是已知的。

这是我正在尝试的行为的蹩脚图片:

Answer 1

好吧，我想出了一个解决方案，既允许相等的边距，又对齐最后一行左侧的 div。需要注意的是它使用隐藏元素，因此容器比它包含的可见元素高。

它还为您的代码添加了一堆额外的标记。如果我想到任何其他方法来做到这一点，我会以不同的方式来做。对不起。

JSFiddle:https://jsfiddle.net/88qadmo3/2/

#container > div {
    margin: 10px;
    width: 100px;
    height: 100px;
}
.floatleft {
    background-color: red;
}

.invis {
    visibility: hidden;
}

#container {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    background-color: #DDDDDD;
}

.clearfix {
    clear: both;
}

<div id="outer">
<div id="container">
    <div class="floatleft"></div>
    <div class="floatleft"></div>
    <div class="floatleft"></div>
    <div class="floatleft"></div>
    <div class="floatleft"></div>
    <div class="floatleft"></div>
    <div class="floatleft"></div>
    <div class="floatleft"></div>
    <div class="floatleft"></div>
    <div class="floatleft"></div>
    <div class="floatleft"></div>
    <div class="floatleft"></div>
    <div class="floatleft"></div>
    <div class="floatleft"></div>
    
    <div class="invis"></div>
    <div class="invis"></div>
    <div class="invis"></div>
    <div class="invis"></div>
    <div class="invis"></div>
    <div class="invis"></div>
    <div class="invis"></div>
    <div class="invis"></div>
    <div class="invis"></div>
    <div class="invis"></div>
    <div class="invis"></div>
    <div class="invis"></div>
    <div class="invis"></div>
    <div class="invis"></div>
</div>
</div>