[CSS] flex의 활용(서로 다른 column에 있는 item 어긋남 해결하기)

오늘은 CSS flex 활용법을 공부했다.

혼자서 공부할 때 레이아웃을 짜느라 고생이 많았는데 flex를 활용하니 레이아웃 짜기가 훨씬 수월했다!

 

레이아웃의 흑역사

오늘 flex 수업을 듣기 전에 생활코딩으로 예습을 했는데

flex 첫 수업에서 '레이아웃의 흑역사'를 소개하면서 시작한 것이 아주 인상적이었다.

 

생활코딩 flex-1

요지는 인류 역사 동안 레이아웃을 코드로 잘 표현하는 방법을 찾기 위해 고군분투 해왔다는 것인데

 

레이아웃을 짜는 데 활용되는 여러 코드들의 차이점을 알려 줘서 매우 유익했고,

또 내가 레이아웃을 짜느라 고생한 것이 그리 이상한 일은 아니었다는 점을 알게 돼 위안이 됐다.😂

 

서로 다른 column에 있는 item 어긋남 해결하기

오늘 수업에서는 flex를 활용해 직접 레이아웃 예제를 작성해 보았다.

레이아웃 짜기 예제는 위와 같은 것이었는데, 다른 부분은 수월했지만 해결하기 까다로운 한 가지가 있었다.

바로 두번째 column의 두번째 item 끝부분과 세번째 item 첫번째 끝부분이 어긋난다는 것이었다.

 

이런 문제가 생긴 원인을 알기는 어렵지 않았다.

 

두번째 column에는 item에 각각 flex-grow를 2,2,1

세번째 column에는 각각 4와 1씩 주었는데,

두번째 column에는 item이 총 세개이기 때문에 마진값과 border값이 추가돼

총 7px(마진 5px + border 1px*2)이 어긋나게 된 것이었다.

 

해결책을 찾아 헤맨 끝에 마침내 같은 문제를 겪고 있는 사람의 질문글을 찾아 내 해결할 수 있었다.

 

 

해결책

.col3>.item:nth-child(1){
    flex-basis: calc(80% + 7px);
}

.col3>.item:nth-child(2){
   flex-basis: 20%;
}

 

해결책은 flex-grow가 아니라 flex-basis를 활용하고,

세번째 column의 첫번째 item에 7px을 추가한 80%값을 넣어 주는 것이었다.

 

해결!!

 

해결에 참고한 레퍼런스

내가 참고한 질문글은 stack overflow의 다음 글이었다.

 

flex-grow not sizing flex items as expected

 

내가 겪는 문제는 남도 분명히 겪고 있다!

다만 찾기가 좀 힘들 수도 있을 뿐...😂😂