使用Flexbox将项目居中对齐，并将其他对齐 [英] Align an item in center and other in right with Flexbox

问题描述

我想像下面的例子一样使用flexbox在中心对齐项目，在右边对齐其他项目。

I want to align an item in center and other in right using flexbox like the example bellow.

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

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

Here is my code on plunker (Updated with solution):

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

推荐答案

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

Basically, you can't really do that with flexbox using the basic alignment options (at least as far as I can tell).

p>

您可以 做的是添加一个pseduo元素来伪造一个额外的盒子来为您完成工作。当然，盒子的尺寸必须与要移交的物品相同，然后可以使用 space-between 。

What you can do is add a pseduo-element to fake an extra box to do the work for you. Of course, the box has to have the same dimensions as the item you want to shift over, then you can use 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将项目居中对齐，并将其他对齐的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！