Flexbox布局，在打开侧边栏时推送内容？

Question

所以这是这个问题的图片参考：

我想做的是，使用flexbox layout 3列（左侧栏，中心内容，*可选右侧栏）。基本上，您有3列，但通常只显示左侧栏和内容列。然后，当用户单击菜单按钮时，右侧栏内容会进入视图（如图中红色部分所示）。

我认为启动的父容器看起来像：

body {
    display: flex;
    flex-flow: row nowrap;
    justify-content: center;
    align-items: stretch;
}

还需要什么（特别是侧边栏中的右侧推送）才能使用flexbox？

Answer 1

你是如此亲密。

为了在隐藏右侧边栏时使内容列增长，您需要一个肯定的flex-grow。

为了使body覆盖所有屏幕，请移除其margin并在height: 100%和html上使用body。

这是一个有效的例子：

＆＃13;

＆＃13;

document.querySelector('button').addEventListener('click', function() {
  document.getElementById('right').classList.toggle('hidden');
});

＆＃13;

html, body {
  margin: 0;
  height: 100%;
}
body {
  display: flex;
  flex-flow: row nowrap;
}
.sidebar {
  width: 25%;
  background: #777;
}
#content {
  flex-grow: 1;
  background: #000;
}
.hidden {
  display: none;
}

＆＃13;

<div id="left" class="sidebar"></div>
<div id="content">
  <button type="button">Toggle sidebar</button>
</div>
<div id="right" class="sidebar hidden"></div>

＆＃13;

＆＃13;

＆＃13;