Question

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

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

所以计划是：

在一个父<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;
}

这首先起作用，因为元素最初不会在页面上保留任何空间，并且只在显示时占用空间。

现在，如果我有一个嵌套元素 in 一个图层，我希望它的大小 50％x 50％，这也很有效： Even如果图层div最初设置为display: none 。

现在默认情况下，我的Container div设置为display: block，并且所有大小计算似乎都运行良好，我的问题就在这里开始：

我需要Container div让display: flex利用现代浏览器的 Flexbox 功能。我没有为图层设置固定宽度，而是将它们配置为flex: 1，以便它们增长到容器的完整大小。

这也可以按预期工作。除了一个例外：应该具有 50％x 50％大小的嵌套元素根本不具有大小。在JavaScript中对此进行调试表明，这是因为在创建图层的那一刻，它们都将具有 0 x 0 的大小，并且在它们是时将首先分配它们的大小由$.show()显示。

我所期望的是，一旦展示它们，嵌套元素将增长到 50％x 50％大小，但它没有。

我能做些什么吗？（良好的解决方案和回溯 - 解决方法解决方案）。

我还制作了一个Fiddle来演示这个问题，然后一起玩。

Answer 1

您希望发生的事情应该发生，但由于存在错误，它不会（在Chrome中）。它实际上可以在Firefox中正常工作。

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

此行为实际上最近在flexbox规范中已更改为您期望的行为。问题是b1上的50％高度是针对自动高度元素（弹性项b）而解决的，而Chrome则将该自动高度视为无效百分比基础，即使auto-height实际上可以解析为容器的高度。（由于Flex容器上的默认align-items: stretch，它将成为容器的高度，这使得自动高度弹性项目占据容器的高度。）

作为参考，在本文的第3部分（a）部分提到了规范变更以澄清这一点： http://lists.w3.org/Archives/Public/www-style/2014Mar/0350.html

反正。要解决Chrome错误，您的弹性项b上不能有自动高度，因为您依赖于它是百分比基础。你必须给它一个明确的高度，例如height:100%（更直接地解决了容器的高度）。这是你的小提琴，改变了：http://jsfiddle.net/CN7e8/5/

使用Flexbox时模拟“卡布局”

1 个答案: