Flexbox layout, push content when opening sidebar?

问题

So here is a picture reference for this question:

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

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

回答1:

You are so close.

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

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

Here is a working example:

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>

来源：https://stackoverflow.com/questions/30451840/flexbox-layout-push-content-when-opening-sidebar

标签

flexbox