How do I evenly distribute a group of spans across a div? - css

Question

I have an aside on the side of my webpage that contains span blocks that contain tags for blog posts. Right now, they're set up with display: inline-table that put multiple on each line and then go to the next line as overflow.
If possible (and JavaScript is okay, but CSS is preferred), how can I get these spans to take up the entire width inside of the div so I don't have the "rough edge" to the right? I'd like to either increase the margins between the span blocks or I'd be okay with increasing the width of the span as well.
Here's the code I currently have:
body {
background-color: #333;
color: #333332;
}
aside {
background-color: white;
width: 300px;
height: 300px;
margin: auto;
}
h2 {
margin: 24px;
padding-top: 24px;
}
.tag-wrapper {
padding: 0px 24px;
}
span {
display: inline-table;
text-transform: uppercase;
background-color: #F77C2F;
margin: 4px 2px;
padding: 8px;
}
<div class="container">
<aside>
<h2>Tags</h2>
<div class="tag-wrapper">
<span>finance</span>
<span>if</span>
<span>pv</span>
<span>pivot tables</span>
<span>vba</span>
<span>test</span>
<span>test</span>
<span>test</span>
</div>
</aside>
</div>

Answer 1

A little flexbox magic will get the job done:
body {
background-color: #333;
color: #333332;
}
aside {
background-color: white;
width: 300px;
height: 300px;
margin: auto;
}
h2 {
margin: 24px;
padding-top: 24px;
}
.tag-wrapper {
padding: 0px 24px;
display: flex;
flex-flow: row wrap;
align-content: stretch;
}
span {
flex: 1 0 auto;
text-transform: uppercase;
background-color: #F77C2F;
margin: 4px 2px;
padding: 8px;
}
<div class="container">
<aside>
<h2>Tags</h2>
<div class="tag-wrapper">
<span>finance</span>
<span>if</span>
<span>pv</span>
<span>pivot tables</span>
<span>vba</span>
<span>test</span>
<span>test</span>
<span>test</span>
</div>
</aside>
</div>
The properties used are:
display: flex: this sets the display type of the container to flex (aka flexbox)
flex-flow: row wrap: makes items order in a row, and wrap as required.
align-content: stretch: makes items stretch to fill the flex direction (row).
flex 1 0 auto: makes the items "growable" (1), but not "shrinkable" (0), and use self base width (auto) before distributing leftover space.

Answer 2

Is this what you are talking about? If so, just change the display of the span to block instead of inline-block.
body {
background-color: #333;
color: #333332;
}
aside {
background-color: white;
width: 300px;
height: 300px;
margin: auto;
}
h2 {
margin: 24px;
padding-top: 24px;
}
.tag-wrapper {
padding: 0px 24px;
}
span {
display: block;
text-transform: uppercase;
background-color: #F77C2F;
margin: 4px 2px;
padding: 8px;
}
<div class="container">
<aside>
<h2>Tags</h2>
<div class="tag-wrapper">
<span>finance</span>
<span>if</span>
<span>pv</span>
<span>pivot tables</span>
<span>vba</span>
<span>test</span>
<span>test</span>
<span>test</span>
</div>
</aside>
</div>