правильная разметка flexbox

Question

Слева меню, справа же на одном уровне меню верхнее и снизу два раздела. Либо я дурочок и от display flex хочу не возможного. Без помощи "top right left bottom". Так я могу, но сайт хочу сделать простым и адаптивным без сложных для меня схем. Простите если выразился не правильно, в терминах деревянный. На скриншоте желаемый результат.

Пересмотрел 200 видосов, прочитал кучу сайтов, смог лишь решить через grid, но мне так не нравится и тоже есть свои нюансы. код желаемого: https://codepen.io/dragangame1337/pen/LYzdjXv

<body><div class="main"><div class="leftbar">хорошо</div><div class="upbar">хорошо</div><div class="centerbar">плохо</div><div class="rightbar">плохо</div></div></body>

Answer 1

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

Answer 2

Если без дополнительных обёрток - то только Grid Layout, для Flexbox лучше обернуть нужные блоки и выстроить нужный каркас.
Допустим таким образом:

body {
  min-height: 100vh;
  margin: 0;
}

.page-frame,
.page-frame-content {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: flex-start;
  width: 100%;
}

.page-frame--left,
.page-frame--right,
.page-frame__content--left,
.page-frame__content--right {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  height: 100%;
}

.page-frame--left {
  width: 200px;
  background: red;
}

.page-frame--right {
  width: 100%;
  background: blue;
}

.page-frame__content--left {
  width: 100%;
}

.page-frame__content--right {
  width: 200px;
}

/* дальше визуализация */

#events, #menu, #content, #functions {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  color: #fff;
  text-shadow: -1px 0 1px #000;
}

#events {background-color: #389b48; min-height: 100vh;}
#menu {background-color: #a2874a; min-height: 50px;}
#content {background-color: #af4e4e; min-height: calc(100vh - 50px);}
#functions {background-color: #3f699d; min-height: calc(100vh - 50px);}

<div class="page-frame">
  <div class="page-frame--left">
    <div id="events">быстрые события</div>
  </div>
  <div class="page-frame--right">
    <div id="menu">меню сайта</div>
    <div class="page-frame-content">
      <div class="page-frame__content--left">
        <div id="content">основа</div>
      </div>
      <div class="page-frame__content--right">
        <div id="functions">доп. функции</div>
      </div>
    </div>
  </div>
</div>

БЛОГ НА HUSL

правильная разметка flexbox

Ответы (2 шт):