用flex对齐中心和右边？答案

【问题标题】：Align center and right with flex?用flex对齐中心和右边？
【发布时间】：2021-07-17 15:39:49
【问题描述】：

我正在尝试使用 flex 水平居中对齐 group1 和右对齐 group2。

<div class="holder">
    <div class="group1">
        ...
    </div>
    <div class="group2">
        ...
    </div>
</div>

CSS：

.holder{
    display: flex;
    justify-content:center;
}
.group2{
    align-self: flex-end;
}

但一切都只是居中，有什么解决办法？

【问题讨论】：

这对于 flexbox 来说是不可能的，而不是任何其他布局......我之前的回答适用。
“解决方法是什么？”这甚至是一个问题吗？您至少可以要求不同的方法来做到这一点，因为 flex-box 不起作用。
一些对齐选项见这里：Methods for Aligning Flex Items

标签： html css flexbox

【解决方案1】：

由于 flexbox 是基于对边距的操作而构建的，因此除了使用 position:absolute 之外，没有其他方法可以将一项移出流程。

任何其他方法都会使中心项受到其他元素的影响。

.holder {
  display: flex;
  justify-content: center;
  border: 1px solid grey;
  position: relative;
}
.group1 {
  background: plum;
}
.group2 {
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  border: 1px solid red;
}

<div class="holder">
  <div class="group1">
    Group 1
  </div>
  <div class="group2">
    Group 2
  </div>
</div>

【讨论】：

【解决方案2】：

假设您有一个带有文本和图标的按钮，并且您希望文本位于中间，而图标位于右侧。不要忘记为按钮指定宽度。

用 flexbox 做起来真的很简单。

button {
 display: flex;
 justify-content: center;
 align-items: center;
 flex: 1;
 width: 400px;
 order: 1;
}

span {
 flex: 1;
}

<button>
 <span>
  Click me  
 </span>
 <i>></i>
</button>

【讨论】：

【解决方案3】：

我们可以使用 flex、grid 和 position 来实现。

查看 flex, grid 的解决方案，因为位置已经在上面提交了??

弹性解决方案：

.holder {
  display: flex;
}
.group1 {
  flex: 1;
  text-align: center;
}

<div class="holder">
  <div class="group1">...</div>
  <div class="group2">.....</div>
</div>

网格解决方案：

.holder {
  display: grid;
  grid-template-columns: 1fr 0fr;
}
.group1 {
  flex: 1;
  text-align: center;
  border: 1px solid green;
}
.group2 {
  border: 1px solid pink;
}

<div class="holder">
  <div class="group1">...</div>
  <div class="group2">.....</div>
</div>

【讨论】：

【解决方案4】：

这是你可以用 Flexbox 做的最好的事情

.holder{
  display: flex;
  justify-content: center;
}

.group1 {
  flex: 1;
  text-align: center;
}

.group2{
  margin-left: auto;
}

<div class="holder">
    <div class="group1">
       Center
    </div>
    <div class="group2">
        Right
    </div>
</div>

更好的选择是使用 relative/absolute 位置和 Flexbox

.holder{
  display: flex;
  justify-content: center;
  color: white;
  position: relative;
}

.group1 {
  flex: 1;
  text-align: center;
  background: black;
}

.group2{
  position: absolute;
  top: 0;
  right: 0;
}

<div class="holder">
    <div class="group1">
       Center
    </div>
    <div class="group2">
        Right
    </div>
</div>

【讨论】：

请注意 Group1 实际上并没有居中。
是的，因为 .group2 的宽度，但我认为这是您可以在不使用相对/绝对定位的情况下使用 flexbox 的最接近的位置。
谢谢，我想这是你用 flex 得到的壁橱。

【解决方案5】：

你可以在.holder和align-self和text-align一起玩：

CSS

.holder{
    display: flex;
    justify-content:center;
    align-content: center;
    height: 200px;
    background: #ccc;
}
.group2{
    align-self: center;
    text-align: right;
    width: 50%;
}

.group1{
    align-self: center;
    width: 50%;
    text-align: center;
}

DEMO HERE

【讨论】：