Flex auto margins and previous / next button spacing - html

Question

I have this situation with Previous/Next Project buttons where I could either have both previous and next project buttons showing, or just one depending on what page the user is on. (First project does not have prev button, last project does not have next button). Same code for all situations.
I used flexbox and justify-content: space-between; to space them normally, and then margin-left: 10px; on the prev button for mobile and it was perfect.
For 1 button case however I added margin-left/right to shove them to the left/right side of page. This overrides margin: auto.
So you see my problem now is with the 2 button situation on mobile. When these buttons collide obviously it looks terrible, I need margin in between but I have margin: auto already on them.
I have added my current state and all 3 situations below:
.project-controls {
display: flex;
flex-direction: row;
justify-content: space-between;
}
.project-controls a {
width: 100%;
max-width: 200px;
padding: 10px 5px;
border: 1px solid #2c2c2c;
font-weight: 600;
text-align: center;
text-decoration: none;
text-transform: uppercase;
color: #2c2c2c;
transition: all 0.3s ease;
}
.project-controls .prev-proj {
margin-right: auto;
}
.project-controls .next-proj {
margin-left: auto;
}
<h1>Two buttons</h1>
<section class="project-controls">
<a class="prev-proj" href="#">Previous Project</a>
<a class="next-proj" href="#">Next Project</a>
</section>
<h1>One button prev</h1>
<section class="project-controls">
<a class="prev-proj" href="#">Previous Project</a>
</section>
<h1>One button next</h1>
<section class="project-controls">
<a class="next-proj" href="#">Next Project</a>
</section>
How can I keep my existing structure and still get that space in between on mobile? My best guess is having some sort of invisible spacer div that I could display with a media query, but just wondering if anyone has a quicker/cleaner solution I'm not thinking of?
Thanks

Answer 1

No need for margin auto on both. You can set a fixed margin-right for the previous element. You also don't need to use justify-content.
.project-controls {
display: flex;
flex-direction: row;
/* no need this too
justify-content: space-between;
*/
}
.project-controls a {
width: 100%;
max-width: 200px;
padding: 10px 5px;
border: 1px solid #2c2c2c;
font-weight: 600;
text-align: center;
text-decoration: none;
text-transform: uppercase;
color: #2c2c2c;
transition: all 0.3s ease;
}
.project-controls .prev-proj {
margin-right: 20px; /* Changed this */
}
.project-controls .next-proj {
margin-left: auto;
}
<h1>Two buttons</h1>
<section class="project-controls">
<a class="prev-proj" href="#">Previous Project</a>
<a class="next-proj" href="#">Next Project</a>
</section>
<h1>One button prev</h1>
<section class="project-controls">
<a class="prev-proj" href="#">Previous Project</a>
</section>
<h1>One button next</h1>
<section class="project-controls">
<a class="next-proj" href="#">Next Project</a>
</section>

Answer 2

I also use previous and next buttons on my web pages.
I also use flexbox and justify-content: space-between or an auto margin, depending on the site (I've switched it up just for variety; ultimately they both have the same effect).
I encountered the same problem as you with having only one button on the first and last pages.
My solution was to add a hidden button on the first and last pages. This keeps the layout behavior consistent on all pages, without a lot of extra CSS (just one or two lines for the .hidden class).
Then on smaller screens, to avoid the "collision" issue altogether, a media query kicks in with flex-direction: column.
.hidden {
visibility: hidden;
width: 0;
}
nav {
display: flex;
justify-content: space-between;
border: 1px dashed blue;
}
#media ( max-width: 500px ) {
nav { flex-direction: column; align-items: center; }
}
<h3>first page</h3>
<nav>
next
</nav>
<h3>middle page</h3>
<nav>
previous
next
</nav>
<h3>last page</h3>
<nav>
previous
</nav>
jsFiddle demo