Flex: how to right align an item which centers on wrap

Question

I'd like to left align two items, and right align one when there is sufficient space but center on wrap.

On first wrap (too thin for right item to fit)

Right item should go to next line and be centered
Remainder remains left aligned

On Second Wrap (too thin for right + mid item to fit)

All three items are vertically stacked and centered

Tried having two layers of flex using justify-content: first with space-between, second with center.

.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/

Unfortunately, the right item does not center upon wrapping, and remains left aligned.

The last "items is outside of subcontainer creating a 2:1 ratio in between them. "container" has 2 children, "subcontainer" has 2 children and the last "item" has no children. Fix the relationship among then so they can be distributed as you want them. — Buffalo
CSS cannot take care of this behavior.You will need javascript, wrapping can easily be done, but without static width, only javascript will be able on the fly to set break points and reset justify content for each containers. — G-Cyrillus

khan khan · Accepted Answer · 2019-07-02T01:05:23

JSFiddle

You can wrap your third item inside another Flexbox container and use media queries:

/* 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>

Flex: how to right align an item which centers on wrap

1 Answers