flex自动保证金和上一个 /下一个按钮间距

Question

我在上一个/下一个项目按钮的情况下，我可以在其中显示上一个和下一个项目按钮，或者只有一个按用户打开的页面。(第一个项目没有上次按钮，最后一个项目没有下一个按钮(。所有情况的相同代码。

我使用Flexbox和justify-content: space-between;正常宽度它们，然后在移动设备上的prev按钮上使用margin-left: 10px;，这是完美的。

对于1个按钮案例，我添加了margin-left/right将它们推到页面的左/右侧。这覆盖了保证金：自动。

因此，您现在看到我的问题是移动设备上的2按钮情况。当这些按钮碰撞时，它看起来很糟糕，我需要介于两者之间，但我有余量：自动已经在它们上。

我添加了当前状态和下面的所有3个情况：

.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>

如何保持现有的结构并仍然在移动设备上获得空间？我最好的猜测是我可以通过媒体查询显示某种不可见的间隔div，但是想知道是否有人有更快/更清洁的解决方案我不考虑？

谢谢

Answer 1

两者都不需要自动保证金。您可以为上一个元素设置固定的margin-right。您也不需要使用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

我还使用上一个和下一个网页上的按钮。

我还使用Flexbox和justify-content: space-between或auto边距，具体取决于网站(我只是为了品种而将其切换；最终它们都具有相同的效果(。

我遇到与您在第一页和最后一页上只有一个按钮的问题。

我的解决方案是在第一页和最后一个页面上添加一个隐藏的按钮。这样可以使所有页面上的布局行为保持一致，而没有很多额外的CSS(.hidden类只有一两行(。

然后在较小的屏幕上，为了避免"碰撞"问题，媒体查询与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>
  <a href="#" class="hidden"></a>
  <a href="#">next</a>
</nav>
<h3>middle page</h3>
<nav>
  <a href="#">previous</a>
  <a href="#">next</a>
</nav>
<h3>last page</h3>
<nav>
  <a href="#">previous</a>
  <a href="#" class="hidden"></a>
</nav>

JSFIDDLE DEMO