Блог

Я пытаюсь выполнить этот дизайн с помощью 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% от большого.

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

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

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

Соотношение 25% к 75% означает соотношение 1: 3 — а на языке flexbox это flex: 1 для малого элемента и flex: 3 для большого элемента.

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

Вы можете установить высоту контейнера на 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>