Flexbox绝对位置垂直导航

Question

我想制作一个垂直导航，说它将是50px，然后我想要一个包含我的页眉，主要内容区域和页脚的flex区域。

现在，当我使用绝对值时，将flexbox容器作为绝对值覆盖，这是自己做的。 我想知道我是否可以告诉我的flex容器从左边开始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

您可以在flex区域上使用margin-left:50px ，使其开始于50px;

查看代码示例

 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; } 

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

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>