Flex: как правильно выровнять предмет по центру

Question

Я хотел бы выровнять по левому краю два элемента и по правому краю один, когда есть достаточно места, но центр на обертке.

При первом обертывании (слишком тонкий для правого элемента, чтобы поместиться)

• Правый элемент должен перейти на следующую строку и быть в центре
• Остаток остается выровненным по левому краю

На втором витке (слишком тонкий, чтобы поместиться правый + средний элемент)

• Все три элемента сложены по вертикали и отцентрированы

---

Попробовано с двумя слоями изгиба с использованием justify-content: первый с пробелом, второй с центром.

.container {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
}

.subcontainer {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}

.item {
  border: 1px solid black;
  height: 100px;
}

<div class="container">
  <div class="subcontainer">
    <div class="item">abc abc abc abc abc abc</div>
    <div class="item">def def def def def def</div>
  </div>
  <div class="item">right right right</div>
</div>

http://jsfiddle.net/b3z18rLn/9/

К сожалению, правый элемент не центрируется при переносе и остается выровненным по левому краю.

Answer 1

JSFiddle

---

Вы можете заключить третий элемент в другой контейнер Flexbox и использовать медиазапросы:

---

/* flex-wrap will put right-subcontainer on a new row when you 
   decrease the viewport's width.*/
.container {
    display: flex;
    flex-wrap: wrap;
}

/* flex-grow of 1 will enable this container to take up the
   entire row when the left and right subcontainers are 
   row by row. 
   
   flex-wrap is used to allow the second item to go onto a
   new row at smaller widths. */
.left-subcontainer {
    display: flex;
    flex-grow: 1;
    flex-wrap: wrap;
}

/* Again, flex-wrap is used to give the right subcontainer 
   the ability to take up the entire row.
   
   flex-end changes the items from positioning left-to-right
   to right-to-left.*/
.right-subcontainer {
    display: flex;
    flex-grow: 1;
    justify-content: flex-end;
}

.item {
    border: 1px solid black;
    width: 300px;
    height: 300px;
}

/* You will need to adjust the arguments for these media queries. 
   Also, if you do decide to use media queries for this approach,
   I would suggest reversing the CSS logic by having the CSS 
   selectors tackle mobile design first and use media queries 
   to tackle design at larger screen sizes. */
   
/* The first wrap/breakpoint is at this width. I am telling the 
   right container to be center-aligned at the first breakpoint. */
@media only screen and (max-width: 925px) {
  .right-subcontainer {
    justify-content: center;
  }
}

/* Then, I tell the left container to be center-aligned at the second
   breakpoint. */
@media only screen and (max-width: 1320px) {
  .left-subcontainer {
    justify-content: center;
  }
}

<div class="container">
    <div class="left-subcontainer">
      <div class="item">abc abc abc abc abc abc</div>
      <div class="item">def def def def def def</div>
    </div>

    <div class="right-subcontainer">
      <div class="item">right right right</div>
    </div>
</div>