Flex space-between 2 items, but centered when wrapped [duplicate] - html

Question

This question already has answers here:
Center buttons on wrap only
(2 answers)
Closed 1 year ago.
What I would like to do
Consider two elements in a container:
<div class="container">
<div>Thing 1</div>
<div>Other thing</div>
</div>
I would like the following criteria to be met:
In a wide context, the two elements should be at opposite ends of the container.
In a narrow context, such that the two elements won't fit in a single row, the second element should 'wrap' onto a new line.
In a context where the elements are on two rows, both elements should be centred.
In addition, I would like to avoid using media breakpoints, so that the layout will work irrespective of the widths of the elements and/or the container. The solution doesn't need to use flex-box (it's just easier to explain what I want in terms of flex-box).
My attempts
.container {
display: flex;
justify-content: space-between;
flex-wrap: wrap;
}
This works for the first two criteria, but not the third. I've experimented with different values of justify-content/flex-grow/flex-basis but have not been able to find a winning combination.
I've also thought about using grid but had equally little success.
Note
This is a very similar question (although, a more specific use-case since I only require 2 elements rather than a general solution.)

Answer 1

With justify-content: space-around you can achieve the 3rd criteria with elements present at opposite end in wide context
.container {
display: flex;
justify-content: space-around;
flex-wrap: wrap;
}
<div class="container">
<div>Thing 1</div>
<div>Other thing</div>
</div>
Else if you want them to present at extreme end in wide context then have to use #media , this depend on the width of text-div's which makes them wrap after a certain reduce in view port width .
Here will take 500px width where text will wrap for demo only
.container {
display: flex;
justify-content: space-between;
flex-wrap: wrap;
}
#media only screen and (max-width: 500px) {
.container {
justify-content: center;
}
.textDiv {
width: 100%;
text-align:center
}
}
<div class="container">
<div class="textDiv">Thing 1</div>
<div class="textDiv">Other thing</div>
</div>