html - 元素应占用可用的水平空间并在必要时中断

Question

我有四个按钮(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]                |
|[     ]                |

进一步缩小，所有四个 btn 都缩小

+--------------------+--------------+
|[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 ]|
|[      ] [      ]|

尝试过

我试过使用 flexbox。但是，由于旧浏览器的原因，我仍然觉得使用它不太舒服(而且有这么大的突破，很多可用性都受到威胁)而且，除了让最后一个按钮占据整个空间(因此成为比其他按钮大 3 倍)。如:

+-----------------------+-----------+
|[ab   ] [cdef ] [ghi  ]|
|[     ] [     ] [     ]|

|[jk lm                ]|  <-- this btn is as wide as _three_ other buttons
|[                     ]|

我也试过 display: table。但是，这并未考虑“等宽”要求并且如果页面太窄，单元格不会中断，而是 100% 宽度的表格会超出其容器。

如何解决这个问题？

我正在寻找没有 javascript 的解决方案。

Answer 1

使用 Flexbox，您可以模仿这种行为。

这里的主要技巧是 2 个伪元素，它们充当幽灵 并使第 4 个按钮即使在包裹到第二行后仍继续收缩，因此所有按钮始终具有相同的宽度。

Fiddle demo

堆栈片段

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>