时间戳

首页 > 解决方案 > 使用 Flexbox 的绝对位置垂直导航

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

问题描述

我想做一个垂直导航，说是 50px，然后我想有一个弹性区域，里面有我的页眉、主要内容区域和页脚。

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

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

标签： htmlcssflexbox

解决方案

您不需要任何定位或边距，只需使用附加flex 包装使其自然：

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>

推荐阅读