Align an item in center and other in right with Flexbox [duplicate]

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;
}