Как правильно выровнять элементы flexbox?

Question

Я пытаюсь выяснить, как выровнять мои элементы flexbox. Я не уверен, если это вообще возможно, поэтому я спрашиваю. Вот мой код: мой css:

.container {width: 100%; display: flex; position: relative;}
.item {display: flex;}
.one {width: 65%;}
.two {width: 35%;}

и html:

<div class="container>
<div class="item one"></div>
<div class="item one"></div>
<div class="item one"></div>
<div class="item two"></div>
<div class="item two"></div>
</div>

, и я хотел бы сделать это так:

Answer 1

Вы хотите flex-direction: column и flex-wrap:wrap. Затем укажите высоту ваших предметов, чтобы они обернулись внутри контейнера вертикально:

html,body{height:100%;}

.container {
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  border: solid 2px orangered;
  width: 50%;
  height: 60%;
  box-sizing:border-box;
}

.item {
    box-sizing:border-box;
    margin: 2px;
}

.one {
  height: calc(33% - 4px);
  border: solid 2px green;
  width: calc(65% - 4px);
}

.two {
  height: 40%;
  border: solid 2px orange;
  width: calc(35% - 4px);
}

<div class="container">
  <div class=" item one ">one</div>
  <div class="item one ">one</div>
  <div class="item one ">one</div>
  <div class="item two ">two</div>
  <div class="item two ">two</div>
</div>