如何创建将线条均匀填充到末尾的元素，就像下面的 img 一样?

Question

我想知道像img一样最好的方法是什么。我的意思是块对齐 从左到右，取行的最大长度。 哪个更好，编写一个脚本，指定块大小并将其调整为容器大小，或者以某种方式使用 css 网格执行此操作。我不想要一个现成的解决方案，只是提示。关于代码，我只写了这么多，我想如何转换它。这就是为什么我正在寻找一个提示(我想得到什么 https://i.ibb.co/jkgTrzT/how 创建一排不同宽度的元素.png网格内((我得到了什么 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

您需要在弹性框中显示标签。当标签有flex: 1;时，它们将填满剩余空间。

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

Answer 2

如果您知道a元素的宽度，则可以使用float和clear样式，如下所示：

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

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