3 column flexbox, 1 left justified and the other 2 right justified

[csdude55]

I have a row that's 100% width, with 3 columns. I want the first column to be left justified, and the other 2 columns to be right justified together.

If I were doing this with floats, it would be:

Left Column

<div style="float: right">
 <span style="margin-right: 20px">Right Column 1</span>
 Right Column 2
</div>

The Fiddle:
[jsfiddle.net...]

I don't necessarily know the width of any of these columns; or if they exist at all.

I'm trying to accomplish the same look with flexbox. Why? I honestly don't remember at this point, but I think it's just because I didn't want them to wrap around. So maybe this is just for my own education at this point.

So far, the only way I've accomplished it feels kind of... hacky:

<div style="display: flex">
 <div style="flex-basis: 100%">Left Column</div>

 <div style="margin-right: 20px; white-space: nowrap">Right Column 1</div>
 <div style="white-space: nowrap">Right Column 2</div>
</div>

The Fiddle:
[jsfiddle.net...]

Is this the "proper" way to do it in flexbox, or are there attributes that I could use but I'm overlooking?

[lucy24]

I'm confused. Do you mean the three elements are to be left/right aligned relative to the containing block, or do you mean that the content of each individual element is to be left/right aligned? “Left justified” or “right justified” sounds like a contradiction in terms.

What is in these columns? The “white-space: nowrap” implies that they won't have a whole lot of content, unless your viewport is infinitely wide. (Pro tip: A lot of the time you can save a few bytes by instead using a nonbreaking space or two.)

Can we assume that the examples with inline styles are just for posting purposes, and you're not really going to do that? ;)

[csdude55]

Hey Lucy! I don't think I've seen your name pop up so much lately, it's good to see you again :-)

“Left justified” or “right justified” sounds like a contradiction in terms.

Good point, I should have said "aligned" instead of "justified". You're description is correct, the elements would be left/right aligned relative to the container.

Did you look at the Fiddle links? I'm hoping that can explain what I'm doing better than I can. Looking at the WebmasterWorld header and breadcrumbs as an example, too, they're both similar to what I'm talking about with a 100% width row, some things aligned on the left, and others aligned on the right.

The area I'm dealing with shows on several sections of my site where there are lists. The left column shows something like:

Threads 1-20 of 10,000

Then the right column might show an icon for "Favorites", an input element and button for search, 1 or more drop down menus, etc. The one I'm specifically working with has a mixture of small images and text in the right columns, and that text is what's wrapping unless I force the white-space: nowrap style.

Can we assume that the examples with inline styles are just for posting purposes, and you're not really going to do that? ;)

Grrrrl, you know me better than that! LOL Yeah, I just posted them inline to make it easier for you to read. I thought it would be too complicated to make you cross reference classes back and forth.

[lucy24]

The question I'd be asking is how you want that 100% to be apportioned if (a) one or more elements, if left to their own resources, could by themselves take up the whole width, or (b) the content of all three elements combined would not use up the whole width. Here it kinda looks as if you want the two last elements to have some minimal width, and then everything else goes to the first element.

Disclaimer: I personally don't use flex because I'm too old and I just think it looks icky. Generally I go with inline-block. (A decade ago it couldn't be safely used because of That Browser, but this is no longer an issue. Then again, That Browser wouldn't have supported flex either.) Sometimes even display:table or display:table-cell.

Edit: I looked at the code for the present page, which involves a stunning array of nested lists (remember nested tables?). The bits pertaining to navbar are unfortunately in the bootstrap css--unfortunately because it's minified, so you can't just read it--and they do indeed say float:left and float:right. (This seems redundant to me; why not just float the ones on the right?) The drawback to a float is that it isn't a full-height element, so if you want side-by-side columns, that might not be the way to go.

:: looking vaguely around for not2easy, who may have ideas ::

[edited by: lucy24 at 5:28 pm (utc) on Jan 8, 2024]

[not2easy]

I seem to recall That Browser still visits the site in question - but this might be for something else.

[csdude55]

The question I'd be asking is how you want that 100% to be apportioned if (a) one or more elements, if left to their own resources, could by themselves take up the whole width, or (b) the content of all three elements combined would not use up the whole width. Here it kinda looks as if you want the two last elements to have some minimal width, and then everything else goes to the first element.

Correct, I want the last 2 elements to have minimal width while the left element takes up the bulk.

Or, in theory, the first column could shrink to fit the text, too, as long as the others are aligned to the right. Which I guess is what the original float layout was doing, I just don't want any of them to wrap. And I want them vertically centered, which was another nice little advantage of using flex.

Thanks to the charms of CSS, I have it set up so that columns can just go away when the viewport gets smaller :-) It's not perfect since I don't always know what my column widths will be, but it lets me prioritize each column and make the least important go away when there's danger of it messing up the page.

I seem to recall That Browser still visits the site in question - but this might be for something else.

You are correct, sir :-/ This particular section is one that could just hide for older browsers if necessary, but I THINK that flex + -ms-flexbox covers me pretty well.

[Fotiman]

You might start with this basic structure:

<div class="flex gap-20px whitespace-nowrap">
 <div class="flex-auto">
  Left Column
 </div>
 <span class="flex-initial text-right">
  Right Column 1
 </span>
 <span class="flex-initial text-right">
  Right Column 2
 </span>
</div>

And:

.flex {
 display: flex;
}
.flex-auto {
 flex: 1 1 auto;
}
.flex-initial {
 flex: 0 1 auto;
}
.gap-20px {
 gap: 20px;
}
.text-right {
 text-align: right;
}
.whitespace-nowrap {
 white-space: nowrap;
}

[lucy24]

You are correct, sir :-/

Nancy? Is there something you haven't told me?

[csdude55]

Hahaha, @lucy24! Two things about that one:

1. I have no clue anyone's gender on here, except maybe yours since "Lucy" is pretty specific. And I'm guessing "phranque" is a phreaky / leety way of saying "Frank"

2. I might be giving away my age here, but that was intended as a nod to Phil Hartman's Ed McMahon :-)
[youtube.com...]

[csdude55]

@Fotiman, can you clarify what these do?

.flex-auto {
 flex: 1 1 auto;
}

.flex-initial {
 flex: 0 1 auto;
}

I've read a bit about this shorthand, but it doesn't make a bit of sense to me.

[Fotiman]

Sure.

 flex: 1 1 auto;

That is shorthand for:

flex-grow: 1;
flex-shrink: 1;
flex-basis: auto;

This means the flex items (children of the flex container) with that class can grow to fill the extra available space within the container, or shrink if necessary, and will have an initial width based on it's width property. With flex-basis set to auto, the extra available space can be distributed based on the flex-grow value.

 flex: 0 1 auto;

That is shorthand for:

flex-grow: 0;
flex-shrink: 1;
flex-basis: auto;

These items won't grow to fill available extra space, but they can shrink if needed.