javascript - 如何创建将行均匀填充到末尾的元素，如下面的 img 所示？

Question

我想知道像 img 那样最好的方法是什么。我的意思是 block 对齐从左到右并取行的最大长度。哪个更好，编写一个脚本来指定 block 大小并使其适应容器大小，或者使用 css 网格以某种方式进行。我不想要现成的解决方案，只需要提示。关于代码，我就写了这么多，我在想怎么改造。这就是为什么我要寻找提示(我想得到 https://i.ibb.co/jkgTrzT/how-to-create-a-row-of-elements-of-different-width-inside-grid.png)(what 我得到了 https://i.ibb.co/p0NkD8K/what-I-got.png )

HTML:

<div class="tags">
    <a href="">food</a>
    <a href="">photography</a>
    <a href="">web design</a>
    <a href="">art</a>
    <a href="">love</a>
    <a href="">business</a>
</div>

CSS:

.tags {
    padding: 20px 0;
}

.tags a {
    padding: 12px 24px;
    font-size: 13px;
    text-transform: uppercase;
    border: 1px solid rgba(144, 144, 144, .5);
    color: black;
    margin: 0 15px 15px 0;
    display: inline-block;
    transition: .5s ease;
}

Answer 1

您需要在 flexbox 中显示标签。当标签具有 flex: 1; 时，它们将填充剩余空间。

.tags {
    display: flex;
    flex-wrap: wrap;
}
.tag {
    display: block;
    flex: 1;
    min-width: something;
    white-space: nowrap;
}