flex layout에 대한 간단한 이해

flex layout에 관한 작은 설명

이번주에 부트캠프에서 flex layout을 공부했는데(백엔드 과정이지만 기본적인 프론트 지식 정도는 쌓게한다는 의미에서 HTML/CSS도 보았다)
해당 내용이 매우 헷갈리다보니 스트레스를 받는 분들을 많이 만났다.
"flex layout, 이거 사실 별로 중요한 거 아니야~"란 말을 들어도, 이해가 안되는 자신이 답답하게 느껴지는 그 스트레스가, 나는 충분히 상상이 되었다(그냥 내가 성격이 깝깝한 걸지도...).
그래서, 내가 가진 이해가 정확하지 않을지도 모르지만, 실제 활용하기에는 적당한 이해였기에 짧게 나눠보고자 한다.
(제목은 flex 컨테이너에 대해 간단하게 이해시켜준다는 말이 아니라, 간단한 정도만 이해를 도와준다는 말이었던 것)

한가지, 용어 하나만 약속하고 시작하자.
flex 컨테이너란 display: flex해서 만든 바깥의 박스를 말하는 것이고
flex 컨텐츠란 그 안에 내용물로 들어가는 요소들을 말하는 것이다.

1. 컨테이너의 flex-direction 속성에 대해

---

flex-direction 속성은 row(행/가로) 또는 column(열/세로)이라는 속성값을 가진다.
main-axis / cross-axis라는 축 개념을 읽자마자 이해가 된다면 좋겠지만 헷갈리면 이렇게 생각하면 쉽다.

Flex 컨테이너를 노트라고 생각해보자. 방향(flex-direction)의 기본값이 가로(row)니까 공책을 가로로 놓으면 된다.

이 공책에다가, 무슨 내용이 됐든 딱 한 줄만 쓴다고 가정해보자.
그러면 공책을 채우는 방향은 어떻게 될까?

작성 방향은 자연스럽게 왼쪽에서 오른쪽으로 채워나가게 될 것이다(유대인이나 아랍인이 아니라면).

이렇게 컨텐츠가 쌓일 거라는 말이다.

그럼 이번엔, flex-direction: column(열/세로)을 보자.
방향이 세로라고 하니까, 공책을 세로로 돌리면 된다.
이번에도 딱 한 줄만 쓰면서 공책 한 면을 다 쓰고 싶다. 그럼 어떤 방향이 자연스러운 걸까?

위에서 아래로. 내용(컨텐츠)은 공책(컨테이너) 위에서부터 아래로 쌓이게 된다.

이 방향들(컨텐츠가 쌓이는 방향)을 토대로
공책(컨테이너)의 첫 지점에 배치할지, 중간에 배치할지, 끝에 배치할지, 나눠서 배치할지 등을 결정하거나(justify-content)
또 쌓은 컨텐츠들을 위쪽에 정렬할지, 중간에 정렬할지, 아래에 정렬할지 등을 결정할 수 있다(align-items).

2. 컨텐츠의 속성 flex-grow(또는 flex-shrink)의 특징

---

이라고 제목은 썼지만 grow에 대해서만 설명할 것이다. 어차피 똑같다(반대로 동작할 뿐 원리가 같다).
비유하자면 grow는 전투력이다.

지구 상에 있는 땅은 한정적이다.
땅 위에 있는 수많은 지도자들은 본인들의 영토를 지키거나 넓히려고 한다.
그런 면에서 볼 때, 간디 같은 평화주의자는 전투력이 거의 0에 수렴한다고 볼 수 있다.
음... 다른 평화주의자는 누가 있을까? 소크라테스, 노자를 불러보자. 그들도 0에 수렴할 것 같다.

.간디 {
    flex-grow: 0;
}
.소크라테스 {
    flex-grow: 0;
}
.노자 {
    flex-grow: 0;
}

그들은 전투력이 없다. 싸울 생각 자체가 없다. 자기 영역을 가지는 것만으로 충분하다.
자신들의 크기 만큼, 누군가는 좀 더 작게, 누군가는 좀 더 크게 영역을 차지하겠지만, 상관없다. 그들은 평화주의자라서 살찌거나 덩치가 큰 걸 가지고 괴롭히지 않는다.
그런 그들의 모습을 렌더링한다면 이렇게 될 것 같다.

만약에, 조금 욕심있는 사람들의 경우는 어떨까?
일반적인 사람이라면 다들 착하지만, 그래도 인간인 이상 누구나 욕심이 있으니까, 남에게 피해를 주지 않는 선에서 최대한 영토를 차지하려고 할 것 같다.
평범한 사람들이니까 전투력이 전부 1로 동일하다고 가정하자.

.윤계상 {
    flex-grow: 1;
}
.진선규 {
    flex-grow: 1;
}
.허성태 {
    flex-grow: 1;
}

그럼 아마 이렇게 차지하고 살겠지?

하지만 생태계 파괴자 마동석이 등장한다면 어떨까?

.마동석 {
    flex-grow: 3; /* 그의 전투력은 압도적이다 */
}
.윤계상 {
    flex-grow: 1;
}
.진선규 {
    flex-grow: 1;
}
.허성태 {
    flex-grow: 1;
}

......(..........)

즉시 패대기(...)가 되어 쭈구리게 될 것이다.

당연히 범죄도시에서만(?) 해당되는 이야기는 아니다.

간디와 마동석이 함께하거나, 간디와 윤계상이 함께있다면
평화주의자인 간디는 속절없이 쭈구리는 수밖에 없다. (이쯤 되면 간디 얘기도 들어봐야 한다)

3. flex-basis 속성에 대해

---

basis 속성은 굉장히 쉽다.
살을 찌워주는 거라고(기본 덩치가 커지는 거라고) 생각하면 된다.

간디는 평화주의자지만 맛있는 걸 많이 먹고 살을 많이 찌워서 많은 영역을 차지하게 되었다.

.간디 {
    flex-grow: 0;
    flex-basis: 10rem;
}
.소크라테스 {
    flex-grow: 0;
}
.노자 {
    flex-grow: 0;
}

이렇게.

왠지 만족스러워 보인다(?).
간디의 소식을 들은 윤계상도 20rem 살을 찌웠다.

.윤계상 {
    flex-grow: 1;
    flex-basis: 20rem;
}
.진선규 {
    flex-grow: 1;
}
.허성태 {
    flex-grow: 1;
}

각자는 자기 전투력만큼(1) 영역을 차지했지만 비만인이 된 윤계상은 자기 크기 만큼(+20rem) 영역을 더 차지하게 되었다.
전투력이 균등하니, 균등하게 분할했지만, 원래 덩치가 있는걸 뭐 어떡하라고.

근데.... 마동석이 등장한다면...?

.마동석 {
    flex-grow: 3; /* 그의 전투력은 압도적이다 */
}
.윤계상 {
    flex-grow: 1;
    flex-basis: 20rem;
}

물론 쭈구리게 된다.
하지만 자기 영역 만큼(20rem)을 따로 차지하고 있는 건 변함이 없다.
물리치료를 받는다고(?) 살이 빠지는건 아니니까.

4. 정리

---

1. 이렇게 flex 컨테이너의 정렬과 컨텐츠 요소들의 사이징에 대해 알아봤다.
2. 설명 마지막쯤 가면 이상함을 느낀 사람도 있을텐데, 맞다, 레이아웃을 의도한대로 주려면 basis값은 0을 주거나 auto로 주는게 낫다(나는 0을 주는게 편하다).
3. 2번과 같은 말인데, 화면을 차지하는 영역을 비율로 조정하고 싶다면 grow 속성만으로 레이아웃을 만지는게 좋다. 아니면 grow(혹은 shrink)를 전혀 쓰지 않고 basis나 width(혹은 height)만 써서 비율이 아닌 고정된 영역을 주거나.
4. 위의 개떡같은 설명으로 놀랍게도 이해를 했다면, '20rem 살찐 윤계상(전투력 1)과 10rem 살찐 간디(전투력 0)'가 함께 있게 될 때, 어떻게 될 지 머릿속으로 그려보자.
5. '이걸 왜 손으로 그리고 있지?'란 생각을 중간부터 했다. 30분이면 끝날 포스팅을 1시간 반동안 끄적이고 있었다.
6. 프론트는 넘모 어려웡
7. 간디 선생님 죄송합니다...