Выравнивание элемента flex по вертикали вправо

У меня есть div, который вертикально центрирован с помощью flex box. Но есть ли теперь какой-нибудь способ выровнять его вправо?

7
css css3 flexbox

1 ответов

одним из вариантов было бы добавить justify-content: flex-end в контейнер flexbox:(пример)

.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:(пример)

.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>
13