Настроить блоки контейнера

Question

Я только начинаю заниматься версткой, мне требуется помощь в верстке сайта по макету. У меня несколько вопросов.

Как расположить блоки друг за другом по вертикали, а не горизонтали?
Как задать размер каждому в процентах и сделать каждому блоку отдельный фон? Я вроде сделала фон к первому блоку, но он расположился по центру страницы, что, как я понимаю, исправится, решив мой первый вопрос. Прикрепляю код и макет страницы

<body>
    <div class="container">
        <div> </div>
        <div></div>
        <div></div>
    </div>
</body>
/* далее код CSS */

.container { 
  width: 1270px; 
  margin: 0 auto; 
  display: flex; } 
  
 .container > div:first-child { width: 38%;
  background-image: url('header.jpg'); 
  background-repeat: no-repeat; 
  background-size: cover; }

Answer 1

Если правильно понял то так)

.container{
  display: flex;
  flex-direction: column;
  height: 600px;
  width: 400px;
}

.box{
  flex: 1 1 30%;
  background-color: red;
  border: 1px solid #000;
}

.box:nth-of-type(2){
  flex: 1 1 50%;
  background-color: blue;
}

.box:nth-of-type(3){
  flex: 1 1 20%;
  background-color: sienna;
}

  <div class="container">
        <div class="box"></div>
        <div class="box"></div>
        <div class="box"></div>
      </div>

БЛОГ НА HUSL

Настроить блоки контейнера

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