使用Flexbox实现分页按钮左右布局：缺Prev时Next如何保持居右？

下面几种方法都能解决你遇到的问题，按需选择：

方法一：自动居右的margin技巧 #

给Next按钮设置margin-left: auto，这个属性会让元素自动推到容器右侧，不管左侧是否有其他元素：

div{
  width: 100%;
  display: flex;
  /* 保留原属性，两个按钮时依然生效 */
  justify-content: space-between;
}

.a:last-child {
  margin-left: auto;
}

a.a{
  background: #88f;
  color: #fff;
  padding: 5px 20px;
}

PHP逻辑不需要修改，保持你原来的条件判断即可。

方法二：占位元素维持结构 #

当不需要显示某个按钮时，用一个隐藏的占位元素占据位置，保证flex容器的结构不变：

<div>
<?php if($no_pages_left):?>
<a class="a">Prev</a>
<?php else:?>
<!-- 占位元素，和按钮样式一致但隐藏 -->
<span class="a placeholder"></span>
<?php endif ?>
<?php if($no_pages_right):?>
<a class="a">Next</a>
<?php else:?>
<span class="a placeholder"></span>
<?php endif ?>
</div>

添加对应的CSS：

.a.placeholder {
  visibility: hidden;
  /* 继承按钮的内边距，保证占位宽度一致 */
  padding: 5px 20px;
}

方法三：改用Grid布局 #

Grid布局天生适合这种固定位置的场景，直接定义两列并设置两端对齐：

div{
  width: 100%;
  display: grid;
  grid-template-columns: auto auto;
  justify-content: space-between;
}

a.a{
  background: #88f;
  color: #fff;
  padding: 5px 20px;
}

这种方式下，不管按钮是否存在，另一个都会固定在对应的位置，不需要额外调整PHP或CSS。

内容的提问来源于stack exchange，提问作者mqbaka mqbaka