Flex-box 정렬

CSS

하루 2022. 1. 29. 16:37

아이템을 정렬하는데 있어서 정렬하는 개념들은 종종 헷갈리곤 하기 때문에 간단하게 메모하면 좋을 것 같아서 작성하게 되었다.

컨테이너 내부 아이템 중앙으로 정렬하기

아이템이 여러개일 때 - 수직으로 쌓이도록 정렬

.container {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

아이템이 여러개일 때 - 수평으로 쌓이도록 정렬

.container {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
}