我有四个按钮(a-元素)，它们应该占据div的整个可用水平空间，中间有一些边距空间。四个按钮的宽度应相等(其内容可能会流动)。我目前这样做如下：
.css：
div {
text-align: justify;
}
div::after {
content: "";
display: inline-block;
width: 100%;
}
a {
display: inline-block;
text-align: left;
width: 20%; /* not precisely 20% and 4%, that's just for */
margin-right: 4%; /* the sake of the question */
min-width: 10em;
}
.html：
<div>
<a href="/">btn 1</a>
<a href="/">btn 2</a>
<a href="/">btn 3</a>
<a href="/">btn 4</a>
</div>
当页面变窄时，按钮会缩小，直到它们宽 10em。然后他们打破行，在第 1 行留下三个按钮，在第 2 行留下一个按钮。
但是，按钮现在仍处于 10em。我希望它们增长到略低于 33%(以允许利润率)。如果页面变得更窄，并且按钮再次缩小到 10em，则该行应再次中断，在第 1 行留下两个按钮，在第 2 行留下两个按钮。这些按钮的占用率应该略低于 50%。
最后，如果外部div 缩小到小于 20em，则预计会有四行按钮的宽度为 100%宽(外部div 的最小宽度可能为 10em，这很好)。
要获得ASCII艺术印象(我不是艺术家)：
初始"完整"页面宽度
+-----------------------------------+
|[ab ] [cdef ] [ghi ] [jk lm ]|
|[ ] [ ] [ ] [ ]|
页面收缩
+-------------------------------+---+
|[ab ] [cdef ] [ghi ] [jk lm]|
|[ ] [ ] [ ] [ ]|
页面进一步缩小，最后一个 BTN 流动其内容
+---------------------------+-------+
|[ab ] [cdef] [ghi ] [jk ]|
|[ ] [ ] [ ] [lm ]|
进一步缩小，对于四个BTN来说太窄了 第 1 行有 3 个 BTN，全宽，第 2 行有 1 个 BTN，等宽
+-----------------------+-----------+
|[ab ] [cdef ] [ghi ]|
|[ ] [ ] [ ]|
|[jk lm] |
|[ ] |
进一步萎缩，四家比特币全部萎缩
+--------------------+--------------+
|[ab ] [cdef] [ghi ]|
|[ ] [ ] [ ]|
|[jk ] |
|[lm ] |
进一步缩小，对于三个btn来说太窄了
+-----------------+-----------------+
|[ab ] [cdef ]|
|[ ] [ ]|
|[ghi ] [jk lm ]|
|[ ] [ ]|
进一步缩小
+-------------+---------------------+
|[ab ] [cdef]|
|[ ] [ ]|
|[ghi ] [jk ]|
|[ ] [lm ]|
进一步缩小，对于两个BTN来说太窄了
+---------+-------------------------+
|[ab ]|
|[ ]|
|[cdef ]|
|[ ]|
|[ghi ]|
|[ ]|
|[jk lm ]|
|[ ]|
因此，实际结果：
+-----------------+-----------------+
|[ab ] [cdef] |
|[ ] [ ] |
|[ghi ] [jk ] |
|[ ] [lm ] |
预期结果：
(按钮的最佳宽度)
+-----------------+-----------------+
|[ab ] [cdef ]|
|[ ] [ ]|
|[ghi ] [jk lm ]|
|[ ] [ ]|
试
我尝试使用弹性框。但是，由于较旧的浏览器，我仍然觉得使用它并不舒适(而且由于有这么大的突破，很多可用性都受到威胁)，而且，我只能让最后一个按钮占用整个空间(因此变得比其他按钮大 3 倍)。如：
+-----------------------+-----------+
|[ab ] [cdef ] [ghi ]|
|[ ] [ ] [ ]|
|[jk lm ]| <-- this btn is as wide as _three_ other buttons
|[ ]|
我也试过display: table.但是，这并不考虑"等宽"要求，如果页面太窄，单元格不会中断，而是 100% 宽度表超出其容器。
这如何解决？
我正在寻找没有javascript的解决方案。
使用 Flexbox，您可以模仿这种行为。
这里的主要技巧是充当幽灵的2 个伪元素，即使包裹成第二行，也会使第 4 个按钮继续缩小，因此所有按钮始终具有相同的宽度。
小提琴演示
堆栈代码段
div {
display: flex;
flex-wrap: wrap;
}
a {
flex: 1 0 calc(25% - 16px);
margin: 2px 8px;
text-align: left;
min-width: 6em;
padding: 10px;
border: 1px solid black;
box-sizing: border-box;
}
div::after, div::before {
content: '';
flex: 1 0 calc(25% - 16px);
margin: 0 8px;
min-width: 6em;
padding: 10px 10px;
border: 1px solid transparent;
box-sizing: border-box;
order: 1;
}<div>
<a href="/">btn 1</a>
<a href="/">btn 2 long</a>
<a href="/">btn 3 long</a>
<a href="/">btn 4</a>
</div>