Flexbox布局，打开侧边栏时推送内容吗? [英] Flexbox layout, push content when opening sidebar?

问题描述

因此，这是此问题的图片参考:

So here is a picture reference for this question:

我想做的是，使用flexbox布局3列(左侧栏，中心内容，*可选右侧栏).基本上，您有3列，但通常仅显示左侧栏和内容列.然后，当用户单击菜单按钮时，将显示右侧的栏内容(如图中红色部分所示).

What I would like to do is, using flexbox layout 3 columns (left side bar, center content, *optional right side bar). Basically, you have the 3 columns but only show the left side bar and content columns normally. Then, when the user clicks the menu button, have the right side bar content come into view (as shown by the red part in the drawing).

我认为要启动的父容器看起来像这样:

I figured the parent container to start would look something like:

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

要在Flexbox中使用此功能，还需要什么(尤其是在右侧推入侧边栏时)?

What else would be needed (especially for the right side push in sidebar) to get this working with flexbox?

推荐答案

您是如此亲密.

为了在隐藏右侧栏时增加内容列，您需要在其上加上一个正数flex-grow.

In order to make the content column grow when the right sidebar is hidden, you need a positive flex-grow on it.

并且为了使body覆盖整个屏幕，请删除其margin并在html和body上同时使用height: 100%.

And in order to make the body cover all the screen, remove its margin and use height: 100% on both html and body.

这是一个有效的示例:

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

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

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

这篇关于Flexbox布局，打开侧边栏时推送内容吗?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！