I have a page where I can view all tags.
Some tags might be more popular thus they will be displayed slightly bigger than the tag elements that are not as popular.
Right now when one line cant fit anymore tags, flexbox puts them on the next line:
But as you can see theres a lot of empty space, What I would like is to have the tags in a bit more scattered manner like so:
This is my code:
<div class="row" style="align-items: flex-start;">
@foreach($tags as $tag)
<a href="#"
style="
font-size: {{ ( 15 * $count }}px;
display: flex;
align-items: center;
justify-content: center;
margin: 0;
"
class="m-3 btn btn-secondary ">
Tag Name
<span class="badge badge-light mx-1">2</span>
</a>
@endforeach
</div>
I have tried cycling through different flex properties, but I can't seem to get any results.
I also am not sure how to phrase this type of styling method for research so any references to something similar will help.
EDIT:
After a bit of digging, I found out that tag clouds is what I am trying to achieve.
Most what I have found are either too over styled or include a library, but I believe I just need to find the correct properties to align the tags.
Here is the very barebones version of what I am trying to achieve 