I'm using CSS3 flexbox. I have 2 texts next to each other inside a div.

I want Text A to be aligned on the left side and Text B on the right side, generally.

However if Text B can't fit on one line, I want it to be left aligned on the next row.

Here is my attempt, the issue is that Text B goes to the right side if there's not enough space:

.main { display: flex; flex-wrap: wrap; }
.b { margin-left: auto; }

<div class="main">
    <a class="a" href="#">This is some text for the LEFT side.</a>
    <a class="b" href="#">This is some text for the RIGHT side IF it fits the screen. Left otherwise.</a>
</div>

<iframe name="sif1" sandbox="allow-forms allow-modals allow-scripts" frameborder="0"></iframe>

How can we do this with Flexbox using CSS3 only?

CodePudding user response：

In the .main class add , justify-content:space-between; to push the child elements apart

CodePudding user response：

Remove the margin-left: auto from the b class and add the justify-content:space-between inside the main class for distributing the items evenly so the first item is flush with the start and the last is flush with the end.

.main { display: flex; flex-wrap: wrap; justify-content:space-between}

<div class="main">
    <a class="a" href="#">This is some text for the LEFT side.</a>
    <a class="b" href="#">This is some text for the RIGHT side IF it fits the screen. Left otherwise.</a>
</div>

<div class="main">
    <a class="a" href="#">This is some text for the LEFT side.</a>
    <a class="b" href="#">Short text - RIGHT side IF it fits the screen. Left otherwise.</a>
</div>

<iframe name="sif2" sandbox="allow-forms allow-modals allow-scripts" frameborder="0"></iframe>