Flex 自动边距和上一个/下一个按钮间距

Question

我在使用上一个/下一个项目按钮时遇到这种情况，我可以同时显示上一个和下一个项目按钮，或者只显示一个，具体取决于用户所在的页面。 （第一个项目没有上一个按钮，最后一个项目没有下一个按钮）。适用于所有情况的相同代码。

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

对于 1 个按钮的情况，但是我添加了 margin-left/right 以将它们推到页面的左侧/右侧。这会覆盖边距：自动。

所以您现在看到我的问题是移动设备上的 2 按钮情况。当这些按钮显然碰撞时看起来很糟糕，我需要在它们之间留有边距，但我已经有 margin: auto 了。

我已经添加了我当前的状态和以下所有 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

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

我还使用 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

Answer 2

两者都不需要自动边距。您可以为前一个元素设置一个固定的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>