Navigation with balanced CSS flex-wrap containers

Question

I really love the new CSS flexbox design possibilities. Especially flex-wrap: wrap can be a powerful tool to save some space (e.g. simple mobile navigation design pattern).

My Situation: I have this navigation, on desktops all items are lined in one line. With flex:auto the items fill up all the space. Now, when i resize the browser, at a certain point, when there is no more space left, flex-wrap automagically creates this second line for me.

See my small DEMO or have a look at this picture:

enter image description here

This is what tickles me: Only the first item is in the second row (when the first wrap happened). That's not really balanced and gives a lot of attention on this item. What i want is to distribute them equally. Is there a CSS-only no-hacks-included way that i am missing here?

EDIT: I do this layout for a dynamic web app. This navigation should fit different views and situations. So i don't want to care how many items there are going to be. The markup should ideally be a simple ul li list (no extra rows, no extra classes). So i am really looking for some kind of CSS parameter magic.

EDIT2: For better understanding: text-wrap: balance is a proposal to do basically the same only with chunks of pure text for typography.

EDIT3: See Bootstrap CSS framework grid model for example. Here you various columns-widths. You need to define how much space a column takes (third, quarter), for each device-width, for example: This colums takes a quarter of the width on a desktop, but only half of the width on a phone. wouldn't it be much cooler when browser could justify that?

EDIT4: Think of CSS-columns, here the content spans across the columns, but the content direction is only possible in N-form (column by column), imagine the same in Z-form (line by line).

I did some more research. Seems to me that there is no elegant solution. — Frank Lämmer
– Frank Lämmer, Commented Dec 22, 2013 at 18:28
I've lost the sense of your question after edit. If you want plain markup - enjoy default multi-line algorithm. If you want custom behaviour - adjust markup accordingly. — Pavlo
– Pavlo, Commented Dec 22, 2013 at 19:39
I don't think that what you want can be achieved, but I would like very much to be proved wrong. — vals
– vals, Commented Dec 22, 2013 at 20:16

maxhallinan · Accepted Answer · 2013-12-22 15:43:07Z

0

Use media queries to isolate the viewport width when this unwanted layout occurs. Apply the flex-grow property to the items you want to be larger than the others. For instance, you could set the first and last items to flex-grow: 2; and they would be twice as wide as the second and third items.

edited Dec 22, 2013 at 15:43

answered Dec 22, 2013 at 15:37

maxhallinan

1,3792 gold badges14 silver badges29 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Frank Lämmer Over a year ago

Thx. Also a neat idea. As i edited above: I don't know so much about the items in the list. Also my goal is to come by with as less as possible media queries.

Collectives™ on Stack Overflow

Navigation with balanced CSS flex-wrap containers

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related