如何中心对齐一个flex项目，并使用Flexbox右对齐另一个 [英] How to center-align one flex item and right-align another using Flexbox

问题描述

我对Flexbox完全陌生，希望对齐按钮，但是我看不到如何使用中心对齐按钮和同一行上的右对齐按钮来处理常见情况。

但是，我发现一种方法使用与右对齐项和flex justify-content 与之间< - ，使中间的项目居中的行。

与Flexbox的直接方式？

  .flexcontainer {display：flex; justify-content：空格; 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>其他< / div> < div class =itemcenter>一个< / div> < div class =itemright>其他< / div>< / div>  

解决方案

使用 justify-content：space-between 和一个不可见的flex项目，是一个很好的方式来实现你想要的布局。请注意，如果左侧和右侧项目的长度相等（ see demo ），则中间项目只能居中）。

您可能需要考虑的另一个解决方案包括 auto margin 和绝对定位。这种方法的两个好处是不需要额外的标记和真正的中心可以实现无论项目大小。一个缺点是中心项从文档流程中删除（您可能需要或可能不关心您）。

  .flexcontainer {display：flex; justify-content：flex-start; / *调整* / 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>一个< / div> < div class =itemright>其他< / div>< / div>  

更多详细信息： 沿主轴对齐弹性项的方法 （见框＃62-78）。

I am totally new to Flexbox and wanted to align buttons, but I could not see how to handle the common case with a center-aligned button and a right-aligned button on the same row using only Flexbox.

However, I found a way that used an invisible left-aligned item of the same length as the right-aligned item and the flex justify-content with space-between to make the middle item centered on the row.

Is there a more direct way with 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>

解决方案

Using justify-content: space-between with an invisible flex item, as described in your question, is a good way to achieve the layout you want. Just note that the middle item can only be centered if both left and right items are equal length (see demo).

Another solution you may want to consider involves auto margins and absolute positioning. Two benefits of this method are no need for extra mark-up and true centering can be achieved regardless item sizes. One drawback is that the centered item is removed from the document flow (which may or may not matter to you).

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

More details here: Methods for Aligning Flex Items along the Main Axis (see boxes #62-78).

这篇关于如何中心对齐一个flex项目，并使用Flexbox右对齐另一个的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！