[CSS] Flex 일부 요소 우측/좌측 정렬

Flex를 요소를 배치할 시 일부 요소만 우측/좌측 정렬이 필요할 때가 있다.

이 경우 우측/좌측 정렬이 필요한 요소에 'margin-left:auto'/'margin-right:auto'을 사용하면 쉽게 정렬이 가능하다.

• 우측 정렬: 'margin-left: auto'
• 좌측 정렬: 'margin-right: auto'

예시는 다음과 같다.

<style>
        header {
            display: flex;
            align-items: center;
        }
        .header__logo {
            background-color: yellow;
        }
        .header__menu {
            background-color: greenyellow;
        }
        .header__button {
            background-color: turquoise;
            margin-left: auto;
        }
        div, span, button {
            padding: 3px 5px;
        }

    </style>
    
    <header>
        <div class="header__logo">LOGO</div>
        <div class="header__menu">
            <span>menu1</span>
            <span>menu2</span>
            <span>menu3</span>
        </div>
        <div class="header__button">
            <button>button1</button>
            <button>button2</button>
        </div>
    </header>