使用Flexbox将中心和右边的项目对齐

Question

我想使用flexbox对齐中间和右边的项目，例如下面的示例。

+-------------------------+
|         |    |    |    ||
|         +----+    +----+|
|                         |
|                         |
|                         |
+-------------------------+

以下是关于plunker的代码（更新了解决方案）：

http://plnkr.co/edit/kYYIOIFQaEMHgvZCKMkf?p=preview

Answer 1

基本上，使用基本对齐选项flexbox无法真正做到这一点（至少据我所知）。

你可以做的是添加一个pseduo元素来伪造一个额外的盒子来为你做工作。当然，该框必须与您想要移动的项目具有相同的尺寸，然后您可以使用space-between。

.wrap {
  width: 80%;
  display: flex;
  justify-content: space-between;
  border:1px solid red;
  margin: auto;
}


.wrap:after { /* centered line for demo purposes only */
  content: '';
  position: absolute;
  left: 50%;
  height: 100%;
  width: 0;
  border-right:1px solid green;
}

.box {
  flex:0 0 100px;
  height: 100px;
  background: #000;
}

.wrap:before, .box:last-child {
  content: '';
  flex:0 0 50px;
  height: 100px;
}

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