Как я могу выполнить этот дизайн с flexbox?

Question

Я пытаюсь выполнить этот дизайн с помощью flexbox:

Это должен быть одностраничный сайт.

  .container {
      display: flex;
    }

    .big {
      flex: 2;
      height: 70vh;
      background: gray;
    }

    .small {
      flex: 1;
      height: 70vh;
      background: gray;
    }

<div class="container">
      <div class="small">
      </div>
      <div class="smallest">
      </div>
      <div class="big">
      </div>
 </div>

  

Я понятия не имею, как реализовать «самый маленький» div, чтобы он составлял 25% от большого, не говоря уже о том, чтобы сделать «маленький» 75% из большого.

Также меня очень смущает высота, мне нужно, чтобы они всегда были одинаковой высоты.

Answer 1

С помощью flexbox вы можете обернуть small и smallest в отдельный div и использовать столбец flexbox в секции left.

Я понятия не имею, как реализовать «наименьший» div, чтобы он составлял 25% от большого

От 25% до 75% означает соотношение 1: 3 - и на языке flexbox , который составляет flex: 1 для малого элемента и flex: 3 для большого элемент * * тысяча двадцать-один. * * 1 022 Также меня очень смущает высота, мне нужно, чтобы они всегда были одинаковой высоты.

Вы можете установить высоту контейнера для элемента container - ваш flexbox заполнится до этой высоты.

См. Демо ниже:

.container {
  display: flex;
  height: 70vh;
}

.big {
  flex: 3;
  background: gray;
  margin-left: 5px;
}

.left {
  flex: 1;
  display: flex;
  flex-direction: column;
}

.left .small {
  background: gray;
  flex: 3;
}

.left .smallest {
  margin-top: 5px;
  background: gray;
  flex: 1;
}

<div class="container">
  <div class="left">
    <div class="small">
    </div>
    <div class="smallest">
    </div>
  </div>
  <div class="big">
  </div>
</div>