Flex Flexbox, Push right, Align Left and different widths

Question

左侧简单，完成。

但是右侧部分响应式向右推送但向左对齐，包括小框。请看图片：

有什么简单的 flexbox 想法吗？

Answer 1

试试这个：

.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;
}

<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>

Flex Flexbox, Push right, Align Left and different widths

Flex Flexbox, Push right, Align Left and different widths

css

right-to-left

flexbox