将一个项目居中对齐，其他项目与 Flexbox 对齐 [重复]

Posted 2023-03-05

【中文标题】将一个项目居中对齐，其他项目与 Flexbox 对齐 [重复]

【英文标题】：Align an item in center and other in right with Flexbox [duplicate]

【发布时间】：2015-10-26 23:13:27

【问题描述】：

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

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

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

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

【问题讨论】：

看起来您忘记添加图片了。另外，请包含一些代码以显示您到目前为止所做的尝试。

Err...图片好像不见了！

抱歉，我没有积分来提交图片。

【参考方案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>

【讨论】：

非常感谢老兄！我在 plunker 上更新了我的示例。