Equal space between flexbox items with wrapping text - html

Question

I have a flexbox with three items (divs) laid out horizontally.
I would like the spacing between these items to be equal.
The problem is, however, that I have breakable text within these divs.
In the example below, the spacing between item 1 and 2 is less than the spacing between item 2 and 3 because the text in item 2 is wrapping without the width of the div being adjusted.
Any suggestions on how to achieve equal spacing while still allowing breaking text?
(Note that the background colors in the example are to illustrate the problem of item 2 being off-center)
.outerContainer {
width: 430px;
}
.container {
display: flex;
padding: 20px;
background-color: tomato;
}
.container > div:not(:last-child) {
margin-right: 20px;
}
.container > div {
background-color: pink;
word-break: break-word;
display: flex;
}
.fig {
border: 2px solid black;
display: inline-flex;
align-items: center;
justify-content: center;
width: 30px;
height: 30px;
margin-right: 5px;
}
<div class="outerContainer">
<div class="container">
<div>
<div class="fig">1</div>
<div>two words</div>
</div>
<div>
<div class="fig">2</div>
<div>some we somewrap </div>
</div>
<div>
<div class="fig">3</div>
<div>some text</div>
</div>
</div>
</div>

Answer 1

You seem to be looking for text-align: justify.
Other possible solutions imply design rather than code, such as exactly what you used to demonstrate the problem: give your elements a distinctive background so they get visually defined by the actual element size, not by the contained text.
Or give them a distinctive border.
You should also consider word-break: break-word (which instead of increasing spaces between words on same row to justify text it simply breaks the word at the end of the available row space).
Could you still state about your elements they're not evenly spaced if rendered like this?
.outerContainer {
width: 400px;
}
.container {
display: flex;
background-color: #888;
padding: 20px;
}
.container > * {
box-shadow: 0 3px 5px -1px rgba(0,0,0,.2), 0 5px 8px 0 rgba(0,0,0,.14), 0 1px 14px 0 rgba(0,0,0,.12);
padding: 20px;
box-sizing: border-box;
word-break: break-word;
color: #666;
}
.container > div:not(:last-child) {
margin-right: 20px;
}
.container > div {
background-color: white;
}
<div class="outerContainer">
<div class="container">
<div>two words</div>
<div>and some short somelongword</div>
<div>some text</div>
</div>
</div>
Apart from the above, the answer to your question is: it's not possible using CSS. To simplify your problem for a clearer understanding, you should consider each element has only 1 row (because when there are more than one rows, the problem is still replicated on each individual row, on some more than on others).
The desired outcome is that each of those rows are rendered in such a way that their content would stretch over an arbitrary allocated space by proportionally changing one or more text properties, in a manner that would make the first letter aligned to the leftmost side of the allocated space and would align the rightmost letter with the right limit of the allocated space.
Technically, you can achieve it by modifying:
the space between words (when the row has multiple words)
the space between letters
the font size
combinations of the above
Using only CSS, you can only proportionally and dynamically modify the space between words, by using:
text-align: justify;
text-align-last: justify;
You can also modify the distance between letters, using letter-spacing property, and you can also modify the font-size but not "dynamically" (so that it fills the desired space exactly) - you could calculate such changes on the fly using JavaScript but chances are no matter what you do, one glove won't fit all sizes.
The rule of thumb here is: try to make it clean and natural.
Leaving technicalities aside and trying to solve the real problem (that "it doesn't look good"), the proper answer is: talk to a designer.
Designers are trained into turning average looking stuff or even bad looking stuff into stuff that looks awesome by adding, removing or changing details an average programmer wouldn't think about or, to be more exact, wouldn't have thought making those particular changes would make the bloody thing look so good.