[CSS] FlexBox의 기본과 햇갈리는 개념 정리

해당 포스팅에선 FlexBox의 기본적이고 햇갈리는 개념을 중심으로 작성하였습니다.

 

 

FlexBox는 무엇일까?

 

FlexBox란 유동적으로 배치하기 위한 layout 이라고 생각합니다. 이는 "유동적" 이기에 짧고 간단한 코드로 나타낼 수 있으며 정렬에 용이합니다.

 

그렇다면 Grid 보다 안 좋은 것 아닌가? 라고 생각하실 수 있지만, 이는 상황에 따라 다릅니다. 여기서 유심히 봐야할 것은 "유동적" 이라는 사실입니다. 해당 개념은 아래 예시들을 통해 알아보겠습니다. 

 

출처 : https://www.acmicpc.net/problemset

 

제가 좋아하는 백준 사이트로 예시를 들어보겠습니다. (해당 예시는 "100% 맞다, 이렇다." 가 아니라 그저 "유동적" 이라는 느낌으로 받아드리면 될 것 같습니다.) 왼쪽은 유동적이고 오른쪽은 딱딱한 느낌이 있습니다. 

 

그럼 궁금증이 생기는데요.. FlexBox나 Grid 같은 것 안쓰고 그냥 대충 html로 쓰면 되지 않나? 싶습니다.

 

See the Pen FlexBox-Example-2 by 이현민 (@hnfdwhdu-the-sasster) on CodePen.

일단 FlexContainer에 속하는 Item들은 하나의 객체로 취급되는 느낌을 받을 수 있으며 해당 객체를 정렬하여 배치하는 것을 알 수 있습니다. 그리고 유동적인게 좋은 이유는 화면의 크기가 변할 때 반응형으로 만들기 쉽기 때문입니다. 

 

 

Flex Container/Items

 

FlexBox를 처음 공부할 때 위의 두 개념을 무시하고 넘어가는 경우가 종종 있습니다. 하지만 두 개념은 명확히 다르며 FlexBox를 제대로 사용하기 위해 구분해야 할 쉬운 개념입니다.

 

Flex Container이란 display: flex 로 설정된 영역을 뜻한다.
Flex Item이란 Flex Container에 속하는 자식들을 뜻한다(텍스트 포함).

 

CSS를 겉만 핥는 분들이 정렬을 하기 위해서 Flex 를 사용하곤 합니다. 하지만 해당 속성을 Container에 써야하는지, Item에 사용해야 하는지를 구분하지 못하여 물음표를 띄우곤 했습니다. (본인 경험담..) 여러 속성들은 나중에 포스팅하겠습니다. 

 

 

Justfiy, Align

 

해당 두 개념은 축에 관련된 개념인데요, Justifiy는 주축을, Align는 주축에 수직하는 축을 의미합니다. 그리고 Flex에서 정렬에 관해서 서술할 때 두 개의 축을 잘 구별해서 사용해야 합니다. 

 

See the Pen Untitled by 이현민 (@hnfdwhdu-the-sasster) on CodePen.

위의 예시와 코드를 함께 살펴봅시다. 일단 두 코드의 차이는 flex-direction = row / column 의 차이인데요, 만약 row일 경우 row 방향으로 정렬, column일 경우 column 방향으로 정렬입니다. 처음에 공부하면 row/column 방향이 많이 낫설게 느껴집니다.

 

간단하게 이해하자면 row면 한 줄의 row를, column이면 한 줄의 column을 생각해보면 됩니다. 

 

 

그리고 해당 방향이 주축이 됩니다. 따라서 flex-direction 설정에 따라서 Justifiy, Align 축이 달라진다는 사실을 알 수 있습니다. 

flex-direction 이 Column 일 경우 Column 방향이 주축(Justify) , Row 방향이 수직 축(Align)
flex-direction 이 Row 일 경우 Row 방향이 주축(Justify), Column 방향이 수직 축(Align)

 

---

 

오늘 소개한 내용 말고도 flex에 다양한 속성이 존재하며 활용하는 테크닉이 있지만 일단은 기본적인 개념을 소개하고 활용편은 다음에 올리도록 하겠습니다.

 

대충 알고 쓰면 flex가 오히려 이상하게 작동해서 저도 처음에 대충 알 때는 많이 당황하고 그냥 안썼는데... 이렇게 포스팅 해보면서 저도 다시 배워가네여;; 여러분도 애매하게, 대충 아는 것 보다 확실하게 "이해" 하면서 공부하면 좋을 것 같습니다.

 

만약 틀린 부분이 있다면 댓글 부탁드립니다!