CSS, JQuery - Flex 元素在显示后不出现：无；答案

【问题标题】：CSS, JQuery - Flex elements do not appear after display: none;CSS, JQuery - Flex 元素在显示后不出现：无；
【发布时间】：2016-05-16 19:26:53
【问题描述】：

您可以查看工作演示 here

我有以下布局：

<div class="holder">
  <div id="container">
    <div class="left"></div>
    <div class="right"></div>
  </div>
</div>

其中的样式如下：

.holder{
    height: 200px;
    background: #0F0;
}
#container {
  display: flex;
  flex-flow: row;
  height: 200px;
  background: #00F;
}
.left {
  background: tomato;
  width: 25%;
}
.right {
  flex: 1;
  background: gold;
}

这意味着：

如果#container 不可见，您应该看到.holder 的绿色背景
如果.left 或.right 不能正常显示，您应该看到#container 的蓝色背景

在加载时你应该看到的是：

但是！当我将#container 设置为display: none;

$('#container').css('display', 'none');

然后逆过程

$('#container').css('display', 'block');

flex 组件无法正常显示，您只会得到：

发生了什么？为什么不能正常显示？

【问题讨论】：

标签： jquery html css flexbox

【解决方案1】：

您需要将容器改回display: flex而不是display: block

【讨论】：

是的，尽管如此，还是打败了你。在我发布后立即意识到发生了什么。

【解决方案2】：

在我发布后马上解决了，但我会留给以后遇到这个问题的人。

应该是：

$('#container').css('display', 'flex');

就这么简单。

查看here

【讨论】：