Strive to align item-boxes' borders vertically? - html

Question

Is it possible to make flex children align vertically?
Example
In this case, the left "softwaredevelopment" box should increase a little so that the above "react" align with the "react" underneath. The same goes with "web", "software" and so on..? Obviously, the slight misalignment of the boxes in the picture beneath is slightly annoying...
Does a property for flexbox exist that does what I described?
The solution should be dynamic

Answer 1

Flexbox is great for horizontal layout control, but was not designed to handle vertical layout. Consider CSS Grid with a touch of JavaScript for layouts like this. Once we decide on a number of columns (7, in this case), we can add a bit of JavaScript that decides on the span of columns based on text length. This is a simple prototype, but could be further developed to deal with edge-case rules.
let listItems = document.querySelectorAll(".grid li");
listItems.forEach(item => {
const len = item.innerText.length;
if (len > 15 && len < 20) {
item.classList.add('span-2');
} else if (len >= 20) {
item.classList.add('span-3');
} // etc.
});
.grid {
display: grid;
grid-template-columns: repeat(7, 1fr);
grid-auto-rows: 1fr;
margin: 0;
padding: 0;
list-style: none;
}
.grid li {
text-align: center;
border: .5px solid;
display: flex;
align-items: center;
justify-content: center;
font-size: 100%;
padding: .35em;
}
.span-2 {
grid-column: span 2;
}
.full-width {
grid-column: 1 / -1;
}
<ul class="grid">
<li class="full-width">Show all</li>
<li>Python</li>
<li>NodeJS</li>
<li>React</li>
<li>Web</li>
<li>Software</li>
<li>React</li>
<li>Webdev</li>
<li>Sofware Development</li>
<li>React</li>
<li>Crazy Developers</li>
<li>Web</li>
<li>React</li>
<li class="full-width">Sofware Development</li>
</ul>
jsFiddle