Flex Flexbox、右推、左对齐和不同的宽度答案

【问题标题】：Flex Flexbox, Push right, Align Left and different widthsFlex Flexbox、右推、左对齐和不同的宽度
【发布时间】：2017-12-13 14:29:30
【问题描述】：

左侧简单，完成。

但是右侧部分 RESPONSIVE PUSHED 右推但左对齐，包括小框.. 看图片：

任何 flexbox 简单的想法？

【问题讨论】：

您需要提供工作代码sn-p。

标签： css flexbox right-to-left

【解决方案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>

【讨论】：

@Valentin 你真的需要提供更多信息。您可以使用width: 50%，也可以使用flex-grow: 0。您希望达到的宽度是多少？内容的宽度？