html - 带 Flexbox 的绝对位置垂直导航

Question

我想创建一个 50 像素的垂直导航，然后我想要一个包含页眉、主要内容区域和页脚的 flex 区域。

现在，当我使用 absolute 时，flexbox 容器被覆盖为 absolute ，它正在做它自己的事情。我想知道我是否可以告诉我的 flex 容器从左边 50px 开始，这样我就不必担心图标等会被它吞没。

我是否也必须使 flex 容器成为绝对容器？

Answer 1

您不需要任何定位或边距，只需使用额外的flexwrapper使其自然:

body {margin: 0}

.outerFlex {
  display: flex; /* displays flex-items (children) inline */
  height: 100vh; /* 100% of the viewport height */
}

nav {
  flex-basis: 50px; /* initial width */
  background: lightblue;
}

.innerFlex {
  flex: 1; /* takes the remaining width */
  display: flex;
  flex-direction: column; /* stacks flex-items vertically */
  background: lightgreen;
}

main {
  flex: 1; /* takes the remaining height */
}

<div class="outerFlex">
  <nav>Nav</nav>
  <div class="innerFlex">
    <header>Header</header>
    <main>Main</main>
    <footer>Footer</footer>
  </div>
</div>