Align an item in center and other in right with Flexbox

Question

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

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

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

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

Answer 1

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

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>