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

问题描述

我对 Flexbox 完全陌生，想对齐按钮，但我不知道如何仅使用 Flexbox 处理同一行中居中对齐按钮和右对齐按钮的常见情况.

但是，我找到了一种方法，使用与右对齐项目长度相同的不可见左对齐项目和带有 space-betweenjustify-content> 使中间项目以行为中心.

Flexbox 有没有更直接的方法?

.flexcontainer {显示:弹性；对齐内容:间隔；宽度:500px；高度:200px；}.iteminvisible {弹性:0 1 自动；宽度:100px；高度:100px；可见性:隐藏；}.itemcenter {弹性:0 1 自动；宽度:150px；高度:100px；.itemright {弹性:0 1 自动；宽度:100px；高度:100px；}

<div class="itemvisible">其他</div><div class="itemcenter">一个</div><div class="itemright">其他</div>

解决方案

使用 justify-content: space-between 和不可见的弹性项目，如您的问题所述，是实现的好方法你想要的布局.请注意，如果左右项的长度相等，则中间项只能居中(参见演示).

您可能需要考虑的另一种解决方案是 auto 边距 和 绝对定位.这种方法的两个好处是不需要额外的标记，并且无论项目大小都可以实现真正的居中.一个缺点是从文档流中删除了居中的项目(这对您来说可能重要也可能不重要).

.flexcontainer {显示:弹性；justify-content: flex-start;/* 调整 */位置:相对；/* 新的 */宽度:500px；高度:200px；}.itemcenter {弹性:0 1 自动；宽度:150px；高度:100px；位置:绝对；/* 新的 */左:50%；变换:translateX(-50%);}.itemright {弹性:0 1 自动；宽度:100px；高度:100px；左边距:自动；/* 新的 */}

<div class="itemcenter">一个</div><div class="itemright">其他</div>

此处有更多详细信息:沿主轴对齐 Flex 项目的方法(参见方框#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).

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