Абсолютное Положение Вертикальный Nav с Flexbox

Question

Я хочу сделать вертикальную навигацию, которая скажет, будет 50px, а затем я хочу иметь гибкую область, которая имеет мой заголовок, область основного содержимого и нижний колонтитул.

Прямо сейчас, когда я использую абсолют, контейнер flexbox покрывается как абсолют, который делает свое дело.Мне интересно, могу ли я сказать, чтобы мой flex-контейнер начинался с 50px слева, чтобы мне не приходилось беспокоиться о значках и их поглощении им.

Должен ли я сделать flex-контейнер абсолютным, какхорошо?

Answer 1

Вам просто нужно позиционировать навигацию как абсолютную или фиксированную, а затем дать отступ / поле, равное ширине вашей навигации, основному контенту.Вот пример.

.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>

Answer 2

Вам не нужно позиционирование или поля , просто сделайте это естественным с помощью дополнительной 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 3

Вы можете использовать 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>