When designing a navigation section, I am looking to achieve space-between justification. However, for smaller screens where the navigation items may need to wrap onto multiple rows, I want the items to center themselves instead of aligning to the left when they are alone on a row.
nav {
display: flex;
width: 100%;
flex-flow: row wrap;
justify-content: space-between;
}<nav>
<div class='item'>
Item 1 will be on its own row on smaller screens but won't be centered.
</div>
<div class='item'>
Item 2 will have a similar layout as item 1.
</div>
</nav>Check out the Codepen demo: https://codepen.io/anon/pen/MmdOMP?editors=1100#0