Seeking advice on the best way to handle the following issue: I have designed a set of navigation links, but when the screen size is reduced, there are spacing inconsistencies between the flex items. Sometimes, the '|' symbols that should be placed between items appear at the end of a row before the item drops down to the next line. Additionally, it seems that the text inside the tags can be on separate lines when the browser is widened after being shrunk (though this could be due to my browser).
Is there an effective solution for these problems? I initially used display:flex with justify-content: space-between to evenly space out the items, which works well overall but has some minor flaws.
Thank you
.footer-links {
display: flex;
justify-content: space-between;
flex-wrap: wrap;
background: pink;
}
.footer-links > a {
flex-wrap: nowrap;
background: orange;
}
.footer-links > a:nth-child(n+2) {
padding: 0 1%;
background: lightgreen;
}
.footer-links > a:last-child {
padding-right: 0;
background: red;
}
.footer-links > a:first-child {
padding-right: 1;
background: lightblue;
}
@media (min-width: 1024px) {
.footer-links { justify-content: center }
}<div class='footer-links'>
<a>Home</a> | <a>Terms & Conditions</a> | <a>Contact Us</a> | <a>Apps</a> | <a>Some Link</a> | <a>Contact Us</a> | <a>Apps</a>
</div>