javascript - 使元素占据所有可用空间

Question

JSFiddle:https://http://jsfiddle.net/thou6ju9/1//

情况:
带有字母的瓷砖是动态生成的，并添加到绿色区域。使用 CSS，它们使用 flex 排列在 div 中。调整屏幕大小时，字母会重新排列以适应新的分辨率。

目标:
如果屏幕很大，字母应该通过缩放占用更多空间，但仍保持其纵横比。

更新:
如果字母可以放在 1 行中，则应将它们居中并缩放直到 - 大部分绿色区域都被接收(不相互重叠，因此尊重边距)当需要 2 行时，字母应均匀分布和缩放(根据两行之间的可用空间)

问题:
我假设单独使用 CSS 是不可能的。与 JS 的混合匹配是可行的。问题是:究竟是哪种方式？

我已经包含了一个额外的函数 (adjustLetters)，如果有必要，可以在其中进行一些 JS 调整

for (var index = 0; index < AMOUNT_OF_LETTERS; index++) {
    sContainer.append(addLetter(arrLength[index]));
}
adjustLetters();

限制:
- 将显示 1 到 10 个字母- 字母不能超出绿色区域- 当所有字母都是 1、2 或 3 个字符或两者的组合时它应该工作- 这将始终以横向显示(不是真正的限制)

var arrLength = [1, 3, 2, 1, 2, 3, 1, 2, 3, 3, 2, 2, 1, 2, 3];

字母的长度在此数组中定义

一个完整的解决方案会很棒，但是朝着正确方向的方向当然也很受欢迎:-)

Answer 1

我现在没有足够的时间来制作代码 spinet 作为示例，但我至少有一个可能的解决方案。您可以使用一些 JavaScript 来获取屏幕宽度/高度，并通过使用确定字体大小的数学方程式定义样式标签来调整字体大小。请记住，字体大小以像素为单位。