Question

我想制作一个50px的垂直导航，然后我希望有一个包含我的标题，主要内容区域和页脚的弹性区域。

现在，当我使用绝对值时，flexbox容器会被覆盖，因为它是自己做的事情。我想知道我是否可以告诉我的弹性容器从左侧开始50px，所以我不必担心图标会被它吞噬掉。

我是否还必须将flex容器设为绝对容器？

Answer 1

您不需要任何定位或边距，只需使用其他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>

Answer 2

您可以在弹性区域使用margin-left:50px，使其从50px;

开始

参见代码示例

＆＃13;

body {
  margin: 0;
  height: 100vh;
}

.container {
  height: 100%;
}

.nav {
  position: absolute;
  width: 50px;
  background: green;
  height: 100%;
}

.flex-container {
  display: flex;
  background: yellow;
  height: 100%;
  margin-left: 50px;
}

＆＃13;

<div class="container">
  <div class="nav"></div>
  <div class="flex-container">text sample</div>
</div>

＆＃13;

Answer 3

您只需要将导航定位为绝对导航或固定导航，然后将导航宽度等于导航宽度添加到主要内容。这是一个例子。

.container {
  width: 100%;
}
.left-nav {
  position: fixed;
  width: 50px;
  height: 100%;
  background: black;
}
.main {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding-left: 50px;
  background: rgba(255,0,0,0.1);
}
.main-header {
  background: red;

}
.main-body {
  background: green;
}
.main-footer {
  background: blue;
}

<div class="container">
  <div class="left-nav">Nav</div>
  <div class="main">
    <div class="main-header">Header</div>
    <div class="main-body">Body</div>
    <div class="main-footer">Footer</div>
  </div>
</div>

带Flexbox的绝对位置垂直导航

3 个答案: