Question

我做什么

我尝试在Web应用程序中使用Flexbox创建Holy Grail Layout（页眉，页脚，导航边栏，画布）。虽然我没有右边栏（只是要注意）。

所需效果

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

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;

  }





}

我现在永远都在与这个人斗争，我真的可以使用帮助。提前感谢任何想法或解决方案！

Answer 1

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

首先，由于画布似乎是页面的主要内容，因此在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>

关闭画布菜单不在“画布”下滑动

1 个答案: