정렬
Flex속성에서 가장 이해하고 있어야 하는 부분인 정렬에 대해 정리해보고자 한다.
“justify”는 메인축(오뎅꼬치) 방향으로 정렬
“align”은 수직축(오뎅을 뜯어내는) 방향으로 정렬
메인축 방향 정렬
justify-content
justify 키워드가 나왔다! 메인축 방향으로 아이템을들 정렬하는 속성
flex-start (기본값)
flex-direction이 row(가로 배치)일 때는 왼쪽, column(세로 배치)일 때는 위
flex-end
flex-direction이 row(가로 배치)일 때는 오른쪽, column(세로 배치)일 때는 아래이다.
center
아이템들을 가운데로 정렬한다.
space-between
아이템들의 “사이(between)”에 균일한 간격을 만들어 준다.
space-around
아이템들의 “둘레(around)”에 균일한 간격을 만들어 준다.
space-evenly
아이템들의 사이와 양 끝에 균일한 간격을 만들어 준다.
수직축 방향 정렬
align-items
align 키워드가 나왔다! 수직축 방향으로 아이템을들 정렬하는 속성이다.
justify-content와 수직 방향의 정렬
stretch (기본값)
아이템들이 수직축 방향으로 끝까지 쭈욱 늘어난다.
flex-start
아이템들을 시작점으로 정렬한다.
flex-direction이 row(가로 배치)일 때는 위, column(세로 배치)일 때는 왼쪽이다.
flex-end
아이템들을 끝으로 정렬한다.
flex-direction이 row(가로 배치)일 때는 위, column(세로 배치)일 때는 왼쪽이다.
center
아이템들을 가운데로 정렬한다.
baseline
아이템들을 텍스트 베이스라인 기준으로 정렬한다.
*justify-content: center;
align-item: center;
를 해주면, 아이템을 이렇게↓ 한 가운데에 놓는 것도 매우 쉽다.
👉이해한 내용을 바탕으로 Flex속성을 적용해보는 연습을 해보자~
