关闭画布菜单不在画布下滑动答案

【问题标题】：Off Canvas Menu not sliding under Canvas关闭画布菜单不在画布下滑动
【发布时间】：2015-05-29 06:30:14
【问题描述】：

我在做什么

我正在尝试在 Web 应用程序中使用 Flexbox 创建一个 Holy Grail Layout(Header,Footer,Navigation Sidebar,Canvas)。虽然我的没有右侧边栏（请注意）。

想要的效果

当布局被挤入移动设备时，响应式调整将是侧导航面板应该滑到画布后面，并且可以通过页眉中的汉堡菜单访问。

Here 是类似的效果示例，尽管我的 Header 不会随之滑动。

遇到的问题

我目前还没有添加汉堡包滑动-我首先尝试让导航面板在布局被压缩到宽度低于 460 像素时滑动到画布下方。然而相反，它似乎滑过（甚至失去了高度）。

这是我失败的演示 here

HTML

<head>
    <meta charset="utf-8">
    <title>My Flexbox 01</title>
    <meta name="description" content="My Flexbox">
    <meta name="keywords" content="fex, box">
    <link rel='stylesheet' href='myCSS.css'/>

</head>
<body>

<div class="flexbox-parent">
    <header class="header">Header</header>
    <div class="flex-main-container">
          <div class="navigation">Navigation</div>      
      <div class="canvas">Canvas</div>
    </div>
    <footer class="footer">Footer</footer>
</div>
 <script src="scripts/myJS.js"></script>

</body>

CSS

html, body {
    width: 100%;
    height: 100%;   
}

body {
    margin: 0;
    padding: 0;
    background: pink;
}

.flexbox-parent
{
    display: flex;
    flex-direction: column;
    height: 100%;
    width: 100%;
}

.header {
    height: 50px;
    /*margin: -30px -30px 30px -30px;*/
    border: 1px solid hotpink;
    border-radius: 7px;
    background: hotpink;
}

.flex-main-container {
    display: flex;
    flex: 1;
    justify-content: space-between;
    flex-direction: row;
    border: 1px solid red;
}

.canvas {
    flex: 1;
    border: 1px solid DeepSkyBlue;
    border-radius: 7px;
    background: DeepSkyBlue;
}

.navigation {
    flex: 0 0 12em;
    border: 1px solid yellow;
    border-radius: 7px;
    background: yellow;
}

.footer {
    height: 50px;
    /*margin: -30px -30px 30px -30px;*/
    border: 1px solid aliceblue;
    border-radius: 7px;
    background: aliceblue;
}

@media (max-width: 460px) {

  .navigation{
   position:absolute;
   width:12em;

  }





}

我现在一直在为此苦苦挣扎，我真的可以求助。提前感谢您提供任何想法或解决方案！

【问题讨论】：

标签： html css menu responsive-design flexbox

【解决方案1】：

您不需要媒体查询：只需使用 flexbox 魔术！

首先，由于画布似乎是页面的主要内容，因此在 HTML 中它应该首先出现。

<div class="canvas">Canvas</div>
<div class="navigation">Navigation</div>

如果您不想更改 HTML，可以使用order。

然后，使用多行反向行流：

.flex-main-container {
  flex-flow: row-reverse wrap;
}

由于它是反向的，导航将出现在画布的左侧，就像你想要的那样。

最后，在画布上添加一些min-width：

.canvas {
  min-width: 300px;
}

如果屏幕不够宽，导航会移到下一行。

html, body {
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  background: pink;
}
.flexbox-parent {
  display: flex;
  flex-direction: column;
  height: 100%;
  width: 100%;
}
.header {
  height: 50px;
  /*margin: -30px -30px 30px -30px;*/
  border: 1px solid hotpink;
  border-radius: 7px;
  background: hotpink;
}
.flex-main-container {
  display: flex;
  flex: 1;
  justify-content: space-between;
  flex-flow: row-reverse wrap;
  border: 1px solid red;
}
.canvas {
  flex: 1;
  min-width: 300px;
  border: 1px solid DeepSkyBlue;
  border-radius: 7px;
  background: DeepSkyBlue;
}
.navigation {
  flex: 0 0 12em;
  border: 1px solid yellow;
  border-radius: 7px;
  background: yellow;
}
.footer {
  height: 50px;
  /*margin: -30px -30px 30px -30px;*/
  border: 1px solid aliceblue;
  border-radius: 7px;
  background: aliceblue;
}

<div class="flexbox-parent">
  <header class="header">Header</header>
  <div class="flex-main-container">
    <div class="canvas">Canvas</div>
    <div class="navigation">Navigation</div>
  </div>
  <footer class="footer">Footer</footer>
</div>

【讨论】：