【发布时间】：2012-10-30 12:16:47
【问题描述】：
请查看this jsFiddle 并按下唯一的按钮来填写列表。如您所见，列表中的DIV 元素已调整大小以填充包含的父级。这段代码正是我想做的，但我认为我实现它的方式对于这样一个看似简单的任务来说太复杂了。下面是算法为内部元素分配高度的代码：
fill = function() {
//Loop through all elements once to get total weight
var totalWeight = 0;
var totalHeight = $("#container").height() - 15; //need a little extra empty space at the buttom
$(".list").each(function(i) {
totalWeight += parseInt($(this).attr('weight'));
totalHeight -= parseInt($(this).css('margin'));
});
//Loop though the element a second time to set the relative height
$(".list").each(function(i) {
var element = $(this);
element.css("height", (element.attr("weight") / totalWeight) * totalHeight);
});
}
我的问题是，我们能做到最好吗？是否有任何其他方法（希望更快或更优雅）以合理的跨浏览器兼容性来实现此功能？我只需要支持较新的 Firefox、Chrome 和 Safari。我正在阅读 flex-box here 并查看它的 promising specs，但它看起来不像 flex-box 可以在浏览器中一致地进行加权灵活布局。如果我错了，请给我一个简单的例子来说明如何做到这一点。
这种类型的加权灵活线性布局并不少见，例如它在 Android SDK 中作为布局选项之一提供。相对于分配给它们的权重值，调整元素大小以填充其父容器的推荐方法是什么？如果可能的话，纯 CSS 解决方案会很棒。
【问题讨论】：
-
Flexbox 可用。您可能需要为新旧样式编写一些重复的规则，但它确实有效。
-
我找不到一个很好的例子来说明如何使用 flebox 做到这一点。可以根据我上面的jsFiddle提供一个flexbox解决方案吗？
标签： javascript jquery css flexbox