(CSS) flexbox (feat. flex-direction 설정에 따른 차이)

"다시 공부하는 CSS"

급하게 배워서 써먹기는 하지만

체계적이지 못한 상황을 해결하기 위해 다시 정리하고 있습니다.

(추가) 콘텐츠 정렬 방법

flexbox를 제대로 이해하기 위해서는 axis에 대한 개념이 필요하다.

aixs는 main과 cross axis로 구분한다.
mian axis는 flex-direction 속성에 의해 결정된다.
flex-direction이 row 이면 main axis는 가로축(row 흐름)
flex-direction이 column 이면 main axis는 세로축(column 흐름)

axis를 기준으로 정렬하는 속성에는 justify-content와 align-items가 있다.
justify는 main 기준 정렬, align은 cross 기준 정렬이다.

 

기본은 flex-direction - row 인 경우이다.

 

1. justify-content: 요소들을 가로선 상에서 정렬하며 다음의 값들을 인자로 받는다.

flex-start: 요소들을 컨테이너의 왼쪽으로 정렬합니다.

flex-end: 요소들을 컨테이너의 오른쪽으로 정렬합니다.

center: 요소들을 컨테이너의 가운데로 정렬합니다.

space-between: 요소들 사이에 동일한 간격을 둡니다.

space-around: 요소들 주위에 동일한 간격을 둡니다.

 

==사용예시==

display: flex;

justify-content: flex-end;

 

2. align-items : 세로축을 기준으로 정렬하며 아래의 값들을 인자로 받는다.

flex-start: 컨테이너 최상단으로 정렬

flex-end: 컨테이너 최하단으로 정렬

center: 컨테이너 세로축의 중앙으로 정렬

baseline: 컨테이너의 시작위치에 정렬

stretch(default): 컨테이너에 맞게 늘림

 

 

(주의 사항) flex-direction - column일 경우는

위의 flex-direction -row일 경우와 반대로 작동한다.

flexbox에 관한 콘텐츠를 찾아봐도 이 부분에 대한 차이를 언급하는 곳을 찾지 못하였다.

flexbox 개구리에서 개구리들을 최하단으로 보내려면

어떤 속성명과 속성값을 써야 하는가?

 

위의 정리한 자료를 보자.

align-items는 세로축을 기준으로 정렬한다.

flex-end: 컨테이너 최하단

align-items : flex-end 인가?

 

세로를 기준으로 최하단이라서 그런지

브라우저 상에서 오른쪽 끝으로 갔다.

다시 문제로 돌아와서 생각해보자.

참고로 flex-direction : column인 상황이다.

결국에는 가로축을 기준으로 최하단으로 가야 한다.

그래서 justify-content: flex-end

 

다시 정리하자면

flex-direction이 row인지 column인지에 따라

justify-content와 align-items의 방향설정이 달라진다.

 

 

flex-direction: row이고 justify-content: flex-end 인 경우

justify-content:flex-end의 정의대로 오른쪽으로 정렬된다.

 

flex-direction: column이고 justify-content: flex-end 인 경우

justify-content:flex-end의 정의와 달리 최하단으로 정렬된다.