如何使用 Flexbox 使一个弹性项目居中对齐并右对齐另一个

Posted 2023-03-05

【中文标题】如何使用 Flexbox 使一个弹性项目居中对齐并右对齐另一个

【英文标题】：How to center-align one flex item and right-align another using Flexbox [duplicate]

【发布时间】：2016-01-31 09:23:24

【问题描述】：

我是 Flexbox 的新手，想对齐按钮，但我不知道如何处理仅使用 Flexbox 在同一行上居中对齐按钮和右对齐按钮的常见情况。

但是，我找到了一种方法，它使用与右对齐项目相同长度的不可见左对齐项目和 flex justify-content 和 space-between 来使中间项目居中。

Flexbox 有更直接的方法吗？

.flexcontainer 
  display: flex;
  justify-content: space-between;
  width: 500px;
  height: 200px;


.iteminvisible 
  flex: 0 1 auto;
  width: 100px;
  height: 100px;
  visibility: hidden;


.itemcenter 
  flex: 0 1 auto;
  width: 150px;
  height: 100px;


.itemright 
  flex: 0 1 auto;
  width: 100px;
  height: 100px;

<div class="flexcontainer">
  <div class="iteminvisible">Other</div>
  <div class="itemcenter">One</div>
  <div class="itemright">Other</div>
</div>

【参考方案1】：

   .container 
      display: flex;
      flex-direction: column; //this will allow flex-end to move item to the right            
      align-items: center;
   
   .right-item 
      align-self: flex-end;
   

【讨论】：

但这会将右边的项目放在中间的下方，不是吗？

这会将项目放在单独的行中

这不是预期的行为见小提琴：jsfiddle.net/jLw437s2

【参考方案2】：

如您的问题中所述，将justify-content: space-between 与不可见的弹性项目一起使用是实现所需布局的好方法。请注意，只有当左右项目的长度相等时，中间项目才能居中（see demo）。

您可能要考虑的另一个解决方案涉及auto margins 和absolute positioning。这种方法的两个好处是不需要额外的标记，并且无论项目大小都可以实现真正的居中。一个缺点是从document flow 中删除了居中的项目（这对您来说可能很重要，也可能无关紧要）。

.flexcontainer 
      display: flex;
      justify-content: flex-start;   /* adjustment */
      position: relative;            /* new */
      width: 500px;
      height: 200px;
    

.itemcenter 
      flex: 0 1 auto;
      width: 150px;
      height: 100px; 
      position: absolute;             /* new */
      left: 50%;
      transform: translateX(-50%);
    

.itemright 
      flex: 0 1 auto;
      width: 100px;
      height: 100px;
      margin-left: auto;              /* new */
    

<div class="flexcontainer">
  <div class="itemcenter">One</div>
  <div class="itemright">Other</div>
</div>

更多详情请点击此处：Methods for Aligning Flex Items along the Main Axis（见框 #62-78）。

【讨论】：

这不居中。它取决于左/右元素的宽度。如果它们相同，则有效。如果没有，这不起作用。