将垂直居中的flex元素对齐到右侧

Question

我有一个使用弹性框垂直居中的div。但现在有没有办法让它与右边相符？

Answer 1

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

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

---

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

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;