CSS display: flex 그리고 inline-flex

2022. 7. 2. 00:08

인터넷 익스플로러도 망한 마당에 이제 HTML의 블록 요소들의 배치가 좀 더 자유로워졌습니다. display: flex; 에 의해서 가능해진 것입니다. 이제 flex(플렉스) 정렬 방법에 의해서 간격이든, 가로 정렬이든, 중앙 정렬이든, 세로에 대한 중앙 정렬이든 뭐든지 싹 다 쉽고 간편하게 만들 수 있습니다. 말로는 뭔들 못하겠습니까? 바로 실습으로 들어가겠습니다.

Flex 속성에 대하여

먼저 플렉스에 대한 개념부터 이해하고 넘어가겠습니다. flex를 검색해 보시면 「구부러지다」, 「탄력성」 등의 의미를 담고 있음을 확인할 수 있습니다. 즉 유연하게 요소들을 배치할 수 있다는 뜻으로 해석할 수 있을 것입니다.

flex는 display의 여러 옵션 중 하나입니다. block이나 inline-block, inline 등등의 다양한 옵션 중 하나라는 이야기입니다. 따라서 부모 요소에 display: flex 또는 inline-flex 옵션을 사용합니다. 이때 부모 요소는 Container(컨테이너)가 되고 1대 자식 요소들은 item(아이템) 요소가 됩니다. flex의 다양한 옵션은 바로 컨테이너인 부모 요소에서 제어를 하게 됩니다. 그러면 자동적으로 자식 요소인 아이템들은 부모 요소의 다양한 flex 속성에 의해 배치가 이루어집니다. 아래는 flex를 사용한 간단한 예시입니다.

See the Pen flex, inline-flex by rgy0409 (@rgy0409) on CodePen.

이 결과를 가지고 더 자세히 설명을 하겠습니다.

display: flex;

부모 요소인 컨테이너에 마크업하는 스타일 속성입니다. 이것은 display: block;과 비슷한 개념이라고 이해하시면 됩니다. 즉 컨테이너가 블록 속성을 가지게 됩니다. 현재 제작되는 웹페이지는 거의 대부분 반응형으로 만들어집니다. 반응형 웹에서 블록 요소를 가로 해상도에 맞게 가로로 적절히 배치하는것이 flex 스타일입니다. flex는 자식 요소가 정사이즈로 마크업 되어있어도 유동성있게 움직이게 됩니다. 그것이 flex의 최대 특징이라고 할 수 있겠습니다. 다음에 설명드릴 inline-flex 방식보다 압도적으로 많이 사용되는 방식입니다.

display: inline-flex;

마찬가지로 부모 요소인 컨테이너에 사용하는 스타일 속성입니다. 이것은 display: inline-block;과 같습니다. 즉 부모 요소가 인라인 블록요소 속성이 되어 바로 이어지는 또 다른 컨테이너에도 inline-flex 속성이 있다면 서로 가로로 배치가 됩니다. 그래서 위의 예제를 보시면 파란색 컨테이너는 가로로 배치가 된 상태인 것입니다. 하지만 위에서 언급한대로 inline-flex 방식은 거의 사용되지 않습니다. 이유는 컨테이너 안의 직계 자식 요소들이 반응형으로 동작하지 않기 때문입니다. 반응형 웹사이트를 만들때는 잘 쓰이지 않는 스타일 옵션입니다.

실전 예시

위의 코드펜에 있는 웹코드들을 그대로 브라켓에 옮겨서 직접 브라우저의 가로 사이즈를 늘리고 줄여보았습니다. 아래의 움짤을 봐주시기 바랍니다.

초록색의 컨테이너 DIV가 flex를 적용한 것이고 파란색의 컨테이너 DIV가 inline-flex입니다. 이 둘의 차이가 확실히 보이시죠? 컨테이너의 자식 요소에도 영향을 준다고 말씀드렸는데 그 예시가 바로 맨 마지막에 있는 가로로 긴 파란 컨테이너입니다. 여기에는 자식 요소 10개를 연이어 배치시켰습니다. 보시면 아시겠지만 자식 요소가 부모 요소의 display: inline-flex; 속성에 의해 반응형으로 동작하지 않습니다. 그래서 창을 줄이면 위의 움짤처럼 브라우저에는 가로 스크롤이 생기게 됩니다. 반대되는 예시가 초록색 컨테이너죠. 안쪽의 FLEX라고 적힌 빨간색의 작은 박스들이 창이 줄어드니까 반응형으로 동작하는 모습을 살펴볼 수 있습니다.