1

I've got flex container with multiple items in it. It's very simple - 100% width container with text element inside. Text elements can be various width and need to all fit within the 100% width. If the width is not enough, the individual elements may wrap as required. This works quite well.

Now, when there is enough width for all elements to fit without wrapping, there is equal white space between them. However when the elements shrink in width and text wraps, they don't seem to be correctly spaced any more. It seems that the flex basis does not calculate correctly and as a result, those elements that wrap end up having a much larger white space on the right (it's an ltr container).

Here's the jsfiddle and the relevant code:

HTML:

<ul>
<li>Longer item</li>
<li>Short</li>
<li>Even longer item</li>
<li>Another long item</li>
<li>And another one</li>
<li>Item6</li>
<li>Item 7</li>
<li>Average item</li>
<li>I need a few</li>
<li>This should be enough</li>
</ul>

CSS:

ul {
  width: 100%;
  display: flex;
  justify-content: space-around;
  padding: 0;
}

li {
  flex: 1 1 auto;
  list-style: none;
  padding: 5px;
}

All equal spacing when no wrap: enter image description here

Uneven spacing when wrapping: enter image description here

How can I get the spacing between items to always be equal regardless of the wrapping (or not) of individual items)?

Aleks G
  • 56,435
  • 29
  • 168
  • 265
  • You can't - that's just the way wrapping works inside a flex-child - https://stackoverflow.com/questions/37406353/make-container-shrink-to-fit-child-elements-as-they-wrap – Paulie_D Feb 17 '21 at 17:19
  • https://stackoverflow.com/questions/34995740/css-when-inline-block-elements-line-break-parent-wrapper-does-not-fit-new-width – Paulie_D Feb 17 '21 at 17:22
  • 1
    It's not a `flex-basis` matter. It's about wrapping. See the links above. – Michael Benjamin Feb 17 '21 at 17:32
  • Yeah, looked at those questions now. Doesn't look promising. My client says "I need it that way - it's your problem to solve". Any ideas on how to approach it? – Aleks G Feb 17 '21 at 17:34
  • You could try the `auto-fill` / `auto-fit` functions of CSS Grid. That will solve the spacing issue. But it may require you to define column widths. https://jsfiddle.net/szcp0L5e/ – Michael Benjamin Feb 17 '21 at 17:38
  • @MichaelBenjamin It's not quite solving it. The items wrap onto the next line - this is out of the question. Also, fixed width columns are against what the client is asking. – Aleks G Feb 17 '21 at 17:40
  • Perhaps this? https://jsfiddle.net/ezx2f6ck/ – Michael Benjamin Feb 17 '21 at 17:42
  • Thanks, but, unfortunately, it doesn't do it - see here: https://jsfiddle.net/0mz6t3kr/ for what happens when I set text-align to left (as it needs to be). – Aleks G Feb 17 '21 at 17:52
  • Even with CSS-Grid you will get the same issue - it's the just the way text wraps - https://codepen.io/Paulie-D/pen/vYymvgm – Paulie_D Feb 17 '21 at 17:52
  • Ok, I'll spend some time trying to do with with javascript... very annoying, indeed. – Aleks G Feb 17 '21 at 17:54
  • *My client says "I need it that way - it's your problem to solve".* - Explain that re-writing the way the internet works is a much bigger contract. – Paulie_D Feb 17 '21 at 17:54
  • Go through [my answer](https://stackoverflow.com/a/37413580/3597276) in the first comment above. There are some JS solutions that may work for you. – Michael Benjamin Feb 17 '21 at 18:24
  • text-align:center and your done – Temani Afif Feb 17 '21 at 19:42

1 Answers1

-2

You need to add this in your css. Add this flex-wrap: wrap inside your <ul> to be able to wrap the list, then you need to add a min-width inside your <li> so the gap of the list items will not shrink when you resize the browser.

JayXcoder
  • 1
  • 3
    You are missing the point: the list should _not_ wrap, only text within individual items. – Aleks G Feb 17 '21 at 17:23
  • You mean the items will not wrap but the the text will, to get the same equal gaps..? the only thing i can think of is to let the padding of the `
  • ` bigger than **5px** then add a **word-break: break-all** so the text within the list will wrap. And the padding would be the gaps. I hope this is what your looking for.
    • – JayXcoder Feb 17 '21 at 18:14