패스트캠퍼스 챌린지 17일차

yunyj99 2021. 11. 17. 21:56

수평 정렬하는 flex 속성에 대해 이어서 더 알아보자!

flex-wrap : flex items 묶음(줄 바꿈) 여부를 지정하는 속성. 기본값은 묶음(줄 바꿈) 없는 nowrap이고, 여러 줄로 묶는 wrap 값을 줄 수 있다. nowrap일 때는 칸이 모자라면 한 줄에 item들을 표현하기 위해 크기가 찌그러질 수 있다. 그림으로 확인해보자!

가로 세로 100px의 정사각형 요소들인데 flex로 설정하니 한 줄에 수평 정렬하기 위해 크기가 이상해졌다.

wrap 값을 넣어주니 원래의 크기대로 나오고, 한 줄을 넘어가는 요소들은 줄 바꿈되어 나타났다.

justify-content : 주 축의 정렬 방법 지정 속성. 수평 정렬 할 때는 수평 축, 즉 x축이 주 축이 되므로 곧 수평 정렬의 방법을 결정하는 속성이라고 보면 된다(물론 주 축이 바뀌면 달라질 것임!). 기본값은 flex items를 시작점으로 정렬하는 flex-start(=왼쪽 정렬)이고 끝점으로 정렬하는 flex-end(=오른쪽 정렬), 가운데 정렬하는 center 값이 있다. 간단하게 한글에서 정렬하는 것 처럼 왼쪽 정렬 오른쪽 정렬 가운데 정렬을 정하는 것과 같다고 보면 된다.
align-content : 교차 축의 여러 줄 정렬 방법. 곧 수직 정렬 방법을 결정하는 속성과 같다. 기본값은 flex items를 시작점으로 정렬하는 stretch이고, 마찬가지로 시작점으로 정렬하는 flex-start, 끝점으로 정렬하는 flex-end, 가운데 정렬하는 center 값이 있다. 기본적으로 줄 바꿈 상태여야하고(wrap 상태여야 하고 실제로 item이 2 줄 이상일 때만 동작), 빈 공간이 있어야 한다. 이것도 그림으로 알아보자!!

stretch는 시작점을 기준으로 정렬하되, 2줄로 나뉠 경우 container를 딱 2줄로 나눠서 거기에 맞춰 정렬된다. 만약 item에 높이 값을 주지 않으면 최대한 늘려져서 나타난다.

start의 경우 시작점을 기준으로 2줄이 딱 붙어서 정렬된다.

center의 경우 2줄이 가운데에 정렬되고,

end의 경우 2줄이 끝 점에 딱 붙어서 정렬된다.

align-items : 교차 축의 한 줄 정렬 방법 지정 속성. align-content의 경우 여러 줄이었던 반면 align-itmes는 한 줄 정렬 방법이다. 값은 마찬가지로 stretch, flex-start, flex-end, center 값이 있다. 그림으로 간단하게 알아보자.

start의 경우, 여기서 item이 2줄로 나뉘므로 container를 2줄로 딱 나눠서 각각의 시작점에 맞게 정렬된다.

center의 경우 각 줄에서 가운데 정렬되고,

end의 경우 각 줄에서 끝점에 정렬된다.

※ 본 포스팅은 패스트캠퍼스 환급 챌린지 참여를 위해 작성되었습니다.