CODEWITHSUNDEEP
cssflexbox
Radical_Activity
Radical_Activity

Reputation: 2738

How to responsively align items with Flexbox in CSS3?

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>

How can we do this with Flexbox using CSS3 only?

Upvotes: 1

Views: 51

Answers (2)

Ran Turner
Ran Turner

Reputation: 18036

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>

Upvotes: 1

Felix Orinda
Felix Orinda

Reputation: 743

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

Upvotes: 1

Related Questions