Flexbox align with padding? - html

Question

I am relatively new to flexbox and I find it awesome.
I am currently trying to align a text to the top right of a card section, but the problem I encounter occurs because I don't want it to stick to the right of the screen, but to the rightmost card - So if I have a single card, it wont go to the end of the screen, and also if I have more than the screen can hold (I also flex wrap it) it would still stick to the rightmost card.
I simplified the code for the example (enter on fullscreen and play with the width of the screen by shrinking/expanding devtools(F12))
.spacer {
padding-top: 300px;
}
.card {
height: 200px;
width: 200px;
background-color: blue;
margin-right: 16px;
margin-bottom: 16px;
}
.container {
display: flex;
flex-wrap: wrap;
}
.text-container {
display: flex;
justify-content: flex-end;
}
<div class="spacer"></div>
<div>
<div class="text-container">
<div> wow </div>
</div>
<div class="container">
<div class="card"></div>
<div class="card"></div>
<div class="card"></div>
<div class="card"></div>
<div class="card"></div>
</div>
</div>
the card amount is not fixed as in the example, it is an *ngFor a changing list
I heard a thing from a colleague about fxFlexOffset, but couldn't understand how to use it, and if it is helpful in my example.
Anyone have any Idea how to do it except of media queries, And if it is impossible to do it without media queries, is there a simple one (the cards sizes are fixed)?
Thanks!

Answer 1

If you want an easy CSS solution without media query and without JS I can only thing about a hacky way to achieve this:
.card {
height: 200px;
width: 200px;
background-color: blue;
margin-right: 16px;
position:relative;
text-align:right
}
.card:before {
content:"WOW";
font-size:20px;
background:#fff;
position:absolute;
right:0;
left:-1000%;
top:-25px;
z-index:0;
}
.card:after {
content:"";
position:absolute;
bottom:0;
background:#fff;
left:0;
right:0;
height:20px;
z-index:1;
}
.container {
margin-top:50px;
display: flex;
flex-wrap: wrap;
}
.text-container {
display: flex;
justify-content: flex-end;
}
<div class="container">
<div class="card"></div>
<div class="card"></div>
<div class="card"></div>
<div class="card"></div>
<div class="card"></div>
</div>