This particular piece of code is functioning correctly:
aside {
/* Customize styles for the aside element */
flex: 0 0 40px;
display: flex;
flex-direction: column;
justify-content: space-around;
align-items: center;
background-color: #2800da;
}
i.fa {
/* Styling for the icons */
font-size: 0.9em;
}
<aside >
<i className="fa fa-bars"></i>
<i className="fa fa-home"></i>
<i className="fa fa-search"></i>
<i className="fa fa-volume-up"></i>
<i className="fa fa-user"></i>
<i className="fa fa-spotify"></i>
<i className="fa fa-cog"></i>
<i className="fa fa-soundcloud"></i>
</aside>
The visual outcome appears as expected: https://i.sstatic.net/vXebH.png
All seems to be in order except for one thing, justify-content: space-around:
.LeftNavBar {
aside {
/* Define your styles for the aside element */
flex: 0 0 40px;
display: flex;
flex-direction: column;
justify-content: space-around !important;
align-items: center;
background-color: #ff0000;
i.fa {
/* Styling details for the icons */
font-size: 0.9em;
}
}
}
<div className="LeftNavBar">
<aside >
<i className="fa fa-bars"></i>
<i className="fa fa-home"></i>
<i className="fa fa-search"></i>
<i className="fa fa-volume-up"></i>
<i className="fa fa-user"></i>
<i className="fa fa-spotify"></i>
<i className="fa fa-cog"></i>
<i className="fa fa-soundcloud"></i>
</aside>
</div>
This is the resulting display:
https://i.sstatic.net/B7qbo.png
An unexpected issue is arising. The debugger shows that toggling justify-content: space-around; has no effect whatsoever. The other properties toggle on and off correctly.
Any insights into what could be causing this anomaly?