将垂直居中的弹性元素向右对齐

Question

我有一个 div 使用 flex box 垂直居中。但是现在有什么方法可以让它右对齐吗？

Answer 1

一种选择是将 justify-content: flex-end 添加到 flexbox 容器：(example)

.parent {
    display: flex;
    width: 200px;
    height: 200px;
    border: 1px solid;
    align-items: center;
    justify-content: flex-end;
}
.parent > .child {
    width: 50%;
    height: 50%;
    border: 2px solid #f00;
}

<div class="parent">
    <div class="child"></div>
</div>

或者，您也可以将 margin-left: auto 添加到 flexbox 项目：(example)

.parent {
    display: flex;
    width: 200px;
    height: 200px;
    border: 1px solid;
    align-items: center;
}
.parent > .child {
    width: 50%;
    height: 50%;
    border: 2px solid #f00;
    margin-left: auto;
}

<div class="parent">
    <div class="child"></div>
</div>

将垂直居中的弹性元素向右对齐

Align a vertical centered flex element to the right

css

flexbox