Flex Flexbox，向右推，左对齐和不同宽度

Question

左边轻松，完成了。

但是右侧部分RESPONSIVE PUSHED右边但左对齐，包括小盒子..看图像：

任何flexbox简单的想法？

Answer 1

试试这个：

＆＃13;

＆＃13;

.container {
  display: flex;
  justify-content: space-between;
}

.container > div {
  display: flex;
  flex-direction: column;
}

.right {
  align-items: flex-start;
}

.left {
  align-items: flex-end;
}

.box {
  height: 40px;
  width: 100px;
  border: 1px solid blue;
  margin-bottom: 5px;
}

.wide {
  width: 200px;
}

＆＃13;

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

  <div class="right">
    <div class="box wide"></div>
    <div class="box"></div>
  </div>
</div>

＆＃13;

＆＃13;

＆＃13;