javascript - 使用 Flexbox 时模拟 "Card Layout"

Question

我这里遇到了一个相当复杂的问题。我想在 CSS 中制作一个具有多个 Layers 的布局，这意味着基本上有多个 <div>元素相互堆叠(或者至少让它看起来像这样)并且只有最上面的一个是可见的。

在许多其他 GUI 环境中，这被称为卡片布局。

所以计划是:

• 创建所有<div class='layer'>一个父元素 <div class='container'>元素
• 让他们拥有display: none最初
• 调用$.show()或 $.hide()显示或隐藏它们

HTML:

<div id="containerOne">
    <div  class="layer a"></div>
    <div class="layer b">
        <div  class="inner b1"></div>
    </div>
    <div  class="layer c"></div>
</div>

CSS:

#containerOne {
    width: 150px;
    height: 150px;
    background: red;
}

#containerOne .layer {
    display : none;   
    width: 100%;
    height: 100%
}

.a {    
    background: green;
}

.b {
    background: orange;
}

.b1 {
    width: 50%;
    height: 50%;
    background: yellow;
}

.c {
    background: blue;
}

这在一开始是有效的，因为元素最初不会在页面上保留任何空间，只会在显示时占用空间。

现在，如果我有一个嵌套元素在层中，并且我希望它的大小为50% x 50%，这也很有效:甚至如果图层 div 设置为 display: none最初。

现在默认情况下，我的 Container div 设置为 display: block所有尺寸计算似乎都正常，这就是我的问题开始的地方:

我需要容器 div 有 display: flex利用现代浏览器的 Flexbox 功能。我现在没有为我的图层设置固定宽度，而是将它们配置为 flex: 1所以它们会长到容器的全尺寸。

这也按预期工作。除了一个异常(exception):尺寸应为 50% x 50% 的嵌套元素根本没有尺寸。在 JavaScript 中对此进行调试表明，这是因为在创建Layers 的那一刻，它们的大小都是 0 x 0，并且在创建它们时将首先分配它们的大小由 $.show() 显示.

我期望的是，一旦显示它们，嵌套元素将增长到其 50% x 50% 大小，但事实并非如此。

• 有什么我可以做的吗？ (好的解决方案和 back-hack-workaround 解决方案)。

我还做了一个Fiddle演示问题并尝试。

Answer 1

您期望发生的事情应该发生，但由于错误而没有发生(在 Chrome 中)。它实际上在 Firefox 中正常工作。

这是您的测试用例的简化版本，没有动态更改: http://jsfiddle.net/CN7e8/4/

这种行为实际上最近在 flexbox 规范中被更改为您期望的行为。问题是您在 b1 上的 50% 高度正在针对自动高度元素( flex 元素 b)进行解析，而 Chrome 将该自动高度视为无效百分比基础，即使自动高度实际上可以解析为容器的高度。 (由于 flex 容器上的默认 align-items: stretch，它会成为容器的高度，这使得自动高度 flex 元素采用容器的高度)。

作为引用，本文第 3 期 (a) 部分提到了规范更改以澄清这一点: http://lists.w3.org/Archives/Public/www-style/2014Mar/0350.html

无论如何。要解决 Chrome 错误，您不能在 flex 元素 b 上设置自动高度，因为您依赖它作为百分比基础。你必须给它一个明确的高度，例如height:100%(更直接地解析容器的高度)。这是你的 fiddle ，有所改变:http://jsfiddle.net/CN7e8/5/