Flexbox：保持元素左右答案

【问题标题】：Flexbox: keep elements left and rightFlexbox：保持元素左右
【发布时间】：2018-04-07 12:16:27
【问题描述】：

我正在尝试获取水平呈现的按钮列表。每行包含两个按钮，一个左按钮和一个右按钮。在某些行中，左侧按钮被隐藏 (display: none)，但右侧按钮仍应出现在该行的右侧。

我正在使用 Bootstrap，但找不到合适的样式，所以我想出了自己的。我正在努力解决如果左侧按钮被隐藏，右侧按钮占据左侧位置并出现在最左侧的问题。我尝试将order: 0（用于左键）和order: 1 设置为右键，但这并没有什么不同。

.align-horizontal {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
  }

html:

<tr>
  <td>

   <div class='align-horizontal'>
     <button>left</button>
     <button style='display: none'>right</button>
   </div>
  </td>
</tr>
<tr>
  <td>
   <div class='align-horizontal'>
     <button>left</button>
     <button>right</button>
   </div>
  </td>
</tr>
<tr>
  <td>
   <div class='align-horizontal'>
     <!-- this is where the layout breaks and the right button moves to the left -->
     <button style='display: none>left</button>
     <button>right</button>
   </div>
  </td>
</tr>

即使左侧按钮被隐藏，如何让右侧按钮始终停留在最右侧？

【问题讨论】：

标签： html css flexbox bootstrap-4

【解决方案1】：

Flexbox justify-content:between 仅在同时显示两个元素时才有效。一种解决方法是使用左键visiblity:hidden 而不是display:none...

<tr>
  <td>
   <div class='align-horizontal d-flex w-100 justify-content-between'>
     <button class="invisible">left</button>
     <button>right</button>
   </div>
  </td>
</tr>

如果您必须使用display:none，另一种选择是使用right 按钮上的左侧自动边距(ml-auto) 将其推到右侧。

<tr>
  <td>
   <div class='align-horizontal d-flex justify-content-between'>
     <button class="d-none">left</button>
     <button class="ml-auto">right</button>
   </div>
  </td>
</tr>

https://www.codeply.com/go/JXxWPZl6tK

【讨论】：