使元素占用所有可用空间

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 来获取屏幕宽度/高度并通过使用确定字体大小的数学方程定义样式标签来调整字体大小。请记住，字体大小以像素为单位。