display: flex에서 자식요소 우측 정렬 2가지 방법

1. 우측 정렬할 자식요소에게 CSS 주기

<style>
    .parent {display: flex;}
    .right {margin-left: auto;}
</style>

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

해당 css를 적용한 대상부터 우측 형제 요소 모두가 우측 정렬된다. 해당 방법은 모든 자식 요소가 아닌 일부 자식만 우측 정렬하고 싶을 때 사용하면 된다.

2. 부모요소에게 적용

<style>
    .parent {display: flex;justify-content: flex-end;}
</style>

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

자식요소 모두가 우측 정렬된다. 모든 자식요소들을 우측 정렬하고 싶을때 이 방법을 사용 하면 된다.

번외1. 자식을 아래로 위치시키기

<style>
    .parent {display: flex;}
    .bottom {margin-top: auto;}
</style>

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

번외2. 자식을 우측 아래로 위치시키기

<style>
    .parent {display: flex;}
    .right-bottom {margin: auto 0 0 auto;}
</style>

<div class="parent">
    <div></div>
    <div class="right-bottom"></div>
</div>