Как разместить эти div в моем flexbox?

Question

Я понятия не имею, почему это было так сложно, но аспект гибкой коробки усложняет ситуацию. Я пытаюсь добиться этого, ответственно -

Я следовал различным гибким учебникам безрезультатно. Мой HTML / css:

<div class="frame">
                <div id = "topBar">

                </div>
                <div id = "leftCol">

                </div>
                <div id = "rightCol">

                </div>
                <div id = "center">
                    <span>
                            </span>
                </div>
                <div id = "bottomCol">

                </div>
            </div>

CSS:

    .frame {
        position: fixed;
        display: none;
        z-index: 10000;
        top: 0;
        left: 0;
        display: flex;
        width: 100%;
        max-width: none;
        height: 100vh;
        padding: 3rem;
        box-sizing: border-box;
        bottom: 0;
        text-align: center;
        // grid-template-columns: 15% 70% 15%;
        // grid-template-rows: 15% 70% 15%;
    }

#topBar {
    text-align: center;
    justify-content: center;
  align-items: center;
    float: center;
    width: 100%;

}

#bottomCol {
        align-self: flex-end;
        width: 100%;
            text-align: center;
}
#bottomCol p {

    transform: rotate(0deg);
    display: inline-block;
    padding: 0;
    padding-right: 6px;
}
#leftCol {
    float: left;
    width: 33%;
    position: relative;

}

#leftCol > h2, p{
     transform: rotate(-90deg);
}
#rightCol {
    float: right;
    position: relative;
    transform: rotate(90deg);
}
.scrollBar {
    width: 2px;
    height: 55px;
    background: white;
    border-radius: 10px;
    top: 15px;
    overflow-y: scroll;
}
#center {
    position: relative;
    overflow: visible;
    bottom: 200px;
    width: 300px;
}

Это не приводит к тому, что мне нужно. Как я могу это сделать?

Answer 1

Этот макет может быть легко реализован с помощью Grid Layout, это в примере с учетом того, что вам нужно:

В селекторе #page вы устанавливаете, каким будет макет, а в следующих селекторах вы устанавливаете как будет называться каждая область сетки:

#page {
        display: grid;
        width: 100vw;
        height: 100vh;
        grid-template-areas:
          "leftCol topBar rightCol"
          "leftCol center rightCol"
          "leftCol bottomCol rightCol";
        grid-template-rows: 1fr 5fr 1fr;
        grid-template-columns: 1fr 5fr 1fr;
      }

      #topBar {
        grid-area: topBar;
        background-color: #ffa08c;
      }

      #leftCol {
        grid-area: leftCol;
        background-color: #8ca0ff;
      }

      #rightCol {
        grid-area: rightCol;
        background-color: #ffff64;
      }

      #center {
        grid-area: center;
        background-color: #8cffa0;
      }

      #bottomCol {
        grid-area: bottomCol;
        background-color: #ff8c8c;
      }

<div id="page">
      <div id="topBar">
        <h2>01-02-2020</h2>
      </div>
      <div id="leftCol">
        <h1>'-'</h1>
        <h2>lightbulbs</h2>
      </div>
      <div id="rightCol">
        <p>[</p>
        <div class="scrollBar"></div>
        <p>]</p>
      </div>
      <div id="center">
        <p>
          Lorem ipsum dolor sit amet consectetur adipisicing elit. Vitae alias, dolore, deleniti sed
          explicabo natus reprehenderit quae iure nostrum aliquam illo nihil velit totam corrupti,
          debitis reiciendis quibusdam nam vel!
        </p>
      </div>
      <div id="bottomCol">
        <p id="aggregate" style="transform: rotate(0deg);">[aggregate]</p>
        <p id="daily" style="transform: rotate(0deg);">daily</p>
      </div>
    </div>

Answer 2

Flex может только go в одном направлении по вертикали или по горизонтали.

Из рисунка мы можем определить, что макет будет go по горизонтали, однако для среднего бита он будет go по вертикали.

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

* {
    padding: 0;
    margin: 0;
    box-sizing: border-box;
}

body * {
    padding: 20px;
    border: 1px solid;
}

[container] {
    height: 100vh;
}

[container], [nested] {
    display: flex;
}

[container]>div {
    margin: 5px;
}

[nested] {
    flex-direction: column;
    flex: 1;
    padding: 0;
    border: 0;
}

[nested]>div:nth-child(2) {
    flex: 1;
    margin: 5px 0;
}

<div container>
  <div></div>
  <div nested>
    <div></div>
    <div></div>
    <div></div>
  </div>
  <div></div>
</div>

---

Если изменение html не вариант, есть еще одно решение, но вам придется определить высоту для контейнера.

* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}

body * {
  padding: 20px;
  border: 1px solid;
}

[container] {
  display: flex;
  height: 100vh;
  flex-direction: column;
  flex-wrap: wrap;
}

[container]>div {
  margin: 5px;
}

[container]>div:first-child,
[container]>div:last-child {
  height: 100%;
}

[container]>div:nth-child(3) {
  flex: 1;
}

<div container>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
</div>

Answer 3

Flexbox также был трудным для меня, позвольте мне разбить его и попытаться объяснить вашу проблему с Flexbox. И, вероятно, это прояснит ситуацию. Flexbox является одним из направлений и работает на основе контейнеров, чтобы определить это направление.

  .page-container{
      display:flex;
      flex-direction:row;
      border:solid 5px red;
      padding: 3rem;
      justify-content:strech;
      align-items:strech;
      min-height: 100vh;
   }
.page-element {
  margin: 0 1rem 0 1rem;
   border:solid 1px;
 }
.left-container{
  flex: 0 1 350px;
  margin-left:0;
}
.center-container{
  display:flex;
  flex-direction:column;
  flex:1;
}
.right-container{
  flex: 0 1 350px;
  margin-right:0;
}

.top-container{
  flex: 0 1 150px;
  border:solid 1px;
 }
.middle-container{
  flex: 1 0 50%;
}
.bottom-container{
  flex: 0 1 150px;
  border:solid 1px;
 }

<div class="page-container">
  <div class="page-element left-container">
    left
  </div>
  <div class="page-element center-container">
    <div class="top-container">
      top
    </div>
    <div class="middle-container">
      center
    </div>
    <div class="bottom-container">
      bottom
    </div>
  </div>
  <div class="page-element right-container">
    right
  </div>
</div>

Когда у вас есть контейнеры, вы можете установить направления в нашем CSS

Так что вам нужно определить 1 ваши первые 3 колонки. Хотя, это может показаться странным, это одна строка во flexbox, и элементы будут располагаться рядом друг с другом, поэтому page-container должен быть flex-direction:row

Другой хитрый это center-container так как там 3 раздела. Во flexbox это один столбец, поэтому flex-direction равен column.

Надеюсь, это поможет и объяснит это.