将中心和右侧与 flex 对齐？

Question

我正在尝试使用 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;
}

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

Answer 1

您可以在 .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

Answer 2

由于 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>

Answer 3

这是您使用 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>

Answer 4

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

使用 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>

Answer 5

我们可以使用flex、grid和position.[=14=来实现]

查看 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>

将中心和右侧与 flex 对齐？

Align center and right with flex?

html

css

flexbox