I am currently using the following css to display a list of items with a flexbox
section ol li div ul {
display:flex;
flex-direction:row;
flex-wrap: wrap;
gap:7px;
row-gap:0;
list-style-type: none;
}
This satisfies me on all but one problem: when I have a big item that will not fit entirely on the rest of the line, it will be set at the beginning of a new line, thus possibly making a huge part of the line before unused. I do not wish that (note that for small items, this is exactly what I want).
Initial goal (probably not achievable): I have been thinking on what kind of rule I would like and it would be something like "if more than x% of the line is wasted, then display the item inline instead". This would enable to continue filling the line.
I have currently abandoned on doing that with only html and css and I might consider trying to write such a rule in js later, but not for now (unless somebody has a very nice solution).
Current goal: I have thus decided to manually specify some items (that are "big") that should be inlined (sometimes using media queries, but we can ignore them for now). The idea is to add the following class to those objects.
.inlineitem {
display:inline;
}
Problem: display:inline; within a flex container does not work and I do not wish to change the whole flex container for the other items... Is there a way to achieve what I want ?
