Can I make elements that are set to justify-content: space-between align to the right when they wrap?

Question

I have two elements in a container that are set to "display flex" and "justify-content space-between." This makes them display on the opposite side of each other in the container. If the container shrinks I would like the element on the left to stack on top of the element on the right and align to the right. The behavior I am experiencing now is that they wrap, but the item on the left is above the right element and is aligned to the left, while the element on the right is aligned to the right. How do I make them both align right?

Please keep in mind I can't use a media query because I have multiple cells that will have varying data. So the items will need to wrap at multiple media sizes that I won't be aware of beforehand. Please see my CodePen for more details.

 .u-relative { position: relative; } .u-centerY { display: flex; align-items: center; } .u-fillRemaining { flex: 1; } .u-spaceBetweenX { justify-content: space-between; } .u-wrap { flex-wrap: wrap; } .Rtable-cell { padding: 0 0.625rem; max-width: 12rem; min-width: 6.25rem; border: 1px solid black; } .table-sum { // visibility: hidden; text-transform: uppercase; color: Grey; font-size: 0.75rem; } .t-alignRight { text-align: right; } @media only screen and (max-width: 400px) { .u-spaceBetweenX { justify-content: flex-end; } } 

 <div class="u-relative Rtable-cell"> <div class="u-centerY u-fillRemaining u-spaceBetweenX u-wrap"> <span class="table-sum">sum</span> <div class="u-fillRemaining t-alignRight"> <p>$4,000,000.00</p> </div> </div> </div> 

Answer 1

justify-content: flex-end makes the elements inside the flex container align to the right.

setting flex: 1 0 6rem means that the value area can grow, can't shrink , and its basic size is half the parent size.

once the size of the container shrinks beyond the point the two items can fit in the same row, the second item wraps to the 2nd row, which makes the first element stick to the right (because of the justify-content: flex-end .

if you want the effect to when there's not enough space for the text, you can make the value container shrink as well by setting the second parameter to 1 . it won't shrink beyond its content:

flex: 1 1 6rem; /* now the minimum size can be less than 6rem if the text is shorter */

 setInterval(() => { $('.width-change').toggleClass('short'); }, 2000); 

 .kb-container { padding: 0 0.625rem; max-width: 12rem; min-width: 6.25rem; border: 1px solid black; display: flex; flex-wrap: wrap; justify-content: flex-end; background: white; } .kb-value { flex: 1 0 6rem; text-align: right; } /* not necessary. just for this demo */ .width-change { width: 15rem; height: 7rem; transition: all 250ms; background: lightgrey; } .width-change.short { width: 9rem; } h3 { margin-bottom: 0; } .sub { margin: 3px 0; } body { overflow: hidden; } html { box-sizing: border-box; } html, body { margin: 0; padding: 0; } *, *:before, *:after { box-sizing: inherit; } .kb-example { width: 45vw; display: inline-block; height: 100vh; } .kb-example.kb-colorized .kb-text { background-color: #ccffcc; } .kb-example.kb-colorized .kb-value { background-color: #ccffff; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="kb-example"> <h3>align items to the right using flex</h3> <div class="sub">(container will resize to demo the behavior)</div> <div class="width-change"> <!-- YOU ONLY NEED THIS --> <div class="kb-container"> <span class="kb-text">sum</span> <div class="kb-value"> $4,000,000.00 </div> </div> <!-- END --> </div> </div> <!-- with colorized elements --> <div class="kb-example kb-colorized"> <div class="sub">and now with x-ray:</div> <div class="width-change"> <!-- YOU ONLY NEED THIS --> <div class="kb-container"> <span class="kb-text">sum</span> <div class="kb-value"> $4,000,000.00 </div> </div> <!-- END --> </div> </div> 

here's a codepen as well (this contains only the code you need for this behavior without the extra code for the demo)

Even though this is a flex-end container, it behaves like a space-between flex container because the second item grows and it's text is aligned to the right

Answer 2

add this to your code and change the 400px to whatever you want

@media only screen and (max-width: 400px) {
  .u-spaceBetweenX {
  justify-content: flex-end;
 }
} 

and if you want the items to align left change justify-content: flex-start