如何将侧边栏滑出视图并使内容flexbox调整大小以填充空白？

Question

我的flexbox布局基于Philip Walton的Holy Grail Layout.

我正在尝试创建一个幻灯片/滑出导航侧边栏,就像这些但使用flexbox布局,而不是绝对定位的div.

我见过很多flexbox滑动菜单,例如这个Off Canvas Flexbox菜单,但它们似乎都将文章滑过侧边栏.我希望侧边栏在滑入和滑出视图时推/拉文章.

为了实现这一点,我一直在切换display:block和之间的CSS显示属性display:none.这种方法非常有效,因为侧边栏是隐藏的,内容会自动调整大小以填充新的更大空间.JSFiddle演示显示切换.

但是,当我尝试使用翻译属性(例如transform:translateX(-12em)将侧边栏滑出视图)时,内容将保留在同一位置并且不会调整大小.这留下了一个可以看到父容器的洞.JSFiddle演示滑动切换.

问题:如何滑出nav视图并article调整大小以填补空白？

注意:我想在不使用javascript的情况下实现此目的.

Answer 1

变换纯粹是视觉的,它们实际上不会从元素的布局位置移动元素.

请margin-left改用.

JSfiddle演示

html,
body,
main,
article,
nav,
aside {
  height: 97%;
  box-sizing: border-box
}
body {
  background-color: #ccc;
  margin: 1.5%;
}
main {
  display: flex;
  flex-direction: row;
  flex: 1;
  overflow: hidden;
}
article {
  flex: 1;
}
nav,
aside {
  /* 12em is the width of the sidebars */
  flex: 0 0 12em;
  transition: margin 0.3s ease
}
/* Checkbox hack to toggle nav visibility */

input ~ nav {
  margin-left: -12em;
}
input:checked ~ nav {
  margin-left: 0;
}

<header style="background-color: #a4c400;color:#fff;padding:0.25em">
  <label for="toggle">Click to Toggle Nav</label>
</header>
<main style="background-color: #ccc;">
  <input id="toggle" type="checkbox" checked style="display:none" />
  <nav style="background-color: #8dd0f2;">Nav</nav>
  <article style="background-color:#fff">Article</article>
  <aside style="background-color: #8dd0f2;">Aside</aside>
</main>