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

Question

我是Flexbox的新手,想要对齐按钮,但我看不到如何使用Flexbox处理同一行中心对齐按钮和右对齐按钮的常见情况.

然而,我发现了一种方法,所用的相同的长度右对齐项目的无形左对齐项目和柔性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>

Answer 1

justify-content: space-between如您的问题中所述,使用隐形弹性项是实现所需布局的好方法.请注意,如果左侧和右侧项目的长度相等,则中间项目只能居中(请参阅演示).

您可能需要考虑的另一个解决方案涉及auto边距和绝对定位.这种方法的两个好处是不需要额外的标记,并且无论物品尺寸如何都可以实现真正的定心.一个缺点是中心项目从文档流程中删除(这对您来说可能或不重要).

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

更多详细信息:沿主轴对齐Flex项目的方法(参见方框#62-78).

Answer 2

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