[CSS] Styled-components + 마지막 요소만 오른쪽 정렬하기

매번 적용할 때마다 margin-left인지 margin-right인지.., 속성 값은 또 0인지 auto인지.. 너무 헷갈려서 정리했다! 추가로 Styled-components를 사용하다보니, 하위 값에 대한 접근 방식도 정리해보았다.

 

---

 

마지막 요소만 오른쪽 정렬하기

1. 정렬될 요소들을 감싸는 Container 컴포넌트에 display: flex 지정하기 (width 값도 있어야 함)

2. 마지막 요소에만 style을 margin-left: auto 적용하기

 

Styled-components 내 하위요소에 접근하는 방법!

1. & > 하위요소 (아래 예시의 경우는 div)

2. :last-child { }, 혹은 :nth-child() { } 등

 

전체 코드

import styled from "styled-components";

const Card = () => {
    return (
        <Container>
            <div>1</div>
            <div>2</div>
            <div>3</div>
        </Container>
    )
 }
 
 const Container = styled.div`
    width: 150px;
    height: 50px;
    display: flex;
    & > div:last-child {
        margin-left: auto;
    }
`;

 

결과 화면

margin-left: auto 적용 전

margin-left: auto 적용 후