使用 Flexbox 将一个项目居中对齐，其他项目右对齐

Question

我想使用 flexbox 将一个项目居中对齐，另一个在右边对齐，如下例所示。

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

这是我在 plunker 上的代码（更新了解决方案）：

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

Answer 1

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

您可以做的是添加一个伪元素来伪造一个额外的框来为您完成工作。当然，盒子的尺寸必须和你要转移的物品的尺寸相同，然后你可以使用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>

使用 Flexbox 将一个项目居中对齐，其他项目右对齐

Align an item in center and other in right with Flexbox

css

alignment

flexbox