[Flex] 요소 배치 계산은 브라우저에게 맡기자

HTML 요소는 크게 block과 inline으로 나눌 수 있다.

 

block은 컨테이너처럼 쌓을 수 있는 "블록"처럼 말 그대로 높이가 존재하고 옆으로 이어붙일 수 없는 태그를 칭하고,

inline은 문자나 글처럼 높이가 없고 한 줄로 이어진 태그를 칭한다.

 

이렇게 딱 나뉘어있기에 레이아웃을 짤 때 구분이 쉬운 장점이 있지만, 여러 요소들을 상위 요소로 감싸서 배치하는 등 "세부적"인 구성한다면, 한 줄로 이어붙여야하는 것과 그렇지 않은 것을 섞어야 하는 경우가 생긴다.

그래서 나온 것이 inline-block이다.

이름처럼 높이 속성을 그대로 유지하면서 한 줄에 연달아 배치할 수 있기 때문에, 여러 요소들을 품은 상위 컨테이너들의 한 줄 배치 등으로 널리 쓰인다.

 

하지만 inline-block 역시 한계가 있다. px나 vh 등 요소 하나하나를 계산하기엔 비용이 많이 들고 디스플레이 반응형에 적절하지 못하기 때문이다.

 

이때 flex가 큰 힘을 발휘한다.

flex는 inline-block이 가졌던 "div처럼 block속성을 가진 요소를 한 줄로 이어붙이게 해줌" 특징을 그대로 유지하면서, 배치를 할 때 필요한 수치 계산을 브라우저가 해주기 때문에, 배치가 자동으로 된다.

 

flex를 사용하려면, 자동배치 될 요소들의 직계존속(바로 위의 부모) 태그의 css에 [display: flex;]를 걸어주면 된다.

 

그리고 자동배치이기 때문에 방향이 중요한데, 이 역시 직계존속 태그의 css에 [flex-direction: row;] 또는 [flex-direction: column;]을 걸어주면 된다. 따로 설정하지 않으면 기본값은 row로 설정된다.

 

본격적인 배치를 하려면 현재 flex-direction을 기준으로 삼고 출발해야 한다.

 

만약 내가 flex-direction을 따로 명시하지 않았거나 row로 설정해놓았다면, direction 상태가 row이기 때문에, 당연히 기본축 방향은 row이고 보조(수직)축 방향은 column이다.

 

여기서 기본축main-axis 기준으로의 배치는 justify-content가 하고, 보조축cross-axis 기준으로의 배치는 align-items가 한다.

만약 flex-direction을 column으로 설정해놓았다면, 반대로 기본축은 세로가 되고 보조축은 가로가 된다.

 

중요한 것은 직계존속 태그에 높이 또는 너비가 없다면 따로 설정해야 보조축 기준의 배치가 적용된다는 것이다.