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

我的flexbox布局基于菲利普沃尔顿的圣杯布局。

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

我见过很多像这样的flexbox滑动菜单关闭Canvas Flexbox菜单，但他们似乎都把文章放在侧边栏上。我希望侧边栏在滑入和滑出视图时推/拉物品。

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

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

题：我怎么能滑动 nav 看不见了 article 调整大小以填补空白？

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

10196

2018-04-06 11:15

起源

有关： stackoverflow.com/q/34909809/3597276 - Michael_B

谢谢迈克尔。相关问题是关于 flex-grow 所以我不确定这是我正在寻找的。或者如果是，我看不出它在这种情况下会如何工作。 - ᴍᴀᴛᴛ ʙᴀᴋᴇʀ

该 flex-grow property提供了一种方法，用于使flex容器的内容重新调整大小以填充空白。由于这似乎是您问题的主要组成部分，我发布了相关链接。 - Michael_B

我明白了，我会玩，感谢小费。 - ᴍᴀᴛᴛ ʙᴀᴋᴇʀ

答案:

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

使用 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>

2018-04-06 11:26

这可能是另一种方式。

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;
}
nav,
aside {
  /* 12em is the width of the sidebars */
  flex: 0 0 12em;
  transition: all 0.3s ease
}
/* Checkbox hack to toggle nav visibility */

input:checked ~ nav {
  transform: translateX(0);
  flex: 1;
}
input ~ nav {
  transform: translateX(-12em);
  flex: 0;
  width: 0px;
}
input:checked ~ article {
  flex: 2;
}
input ~ article {
  flex: 3;
}

<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>

2018-04-06 11:40

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

答案:

热门问题

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