9/27 TIL | display: flex와 inline-flex의 차이점

어제 멀미를 해가며 CSS 게임을 모두 마쳤고, 오늘부터는 일과 시간에 퀘스트 과제를 시작하였다. HTML/CSS 주간이라 당연히 퍼블리싱이 주된 내용이었고, 오늘은 마카오뱅크 페이지를 HTML, CSS로 작성해보았다!

좌) 메인 페이지 우) 잔액조회 페이지

좌) 송금 페이지 우) 거래내역 페이지

큰 문제없이 레이아웃을 완성할 수 있었는데, 과제 안내문에 포함되어 있던 배포 주소로 미리 엿 본 샘플 코드 중 메인 페이지 버튼 요소가 inline-flex로 정렬되어 있었다. 물론 나는 샘플과는 다른 방식으로 코드를 작성했기 때문에 이번 과제에서 inline-flex를 쓸 일은 없었지만,  inline-flex는 처음 본 속성이었고, 궁금해서 오늘 한번 정리해보려고 한다.

우선 코드는 아래와 같다.

<div class="container">
    <div class="items item1">A</div>
    <div class="items item2">B</div>
    <div class="items item3">C</div>
</div>

.container {
    display: flex; /* ✅ */
    display: inline-flex; /* ✅ */
}

.items {
    padding: 20px;
}

.item1 {
    background-color: yellow;
    border: 1px solid black;
}

.item2 {
    background-color: pink;
    border: 1px solid black;
}

.item3 {
    background-color: goldenrod;
    border: 1px solid black;
}

flex / inline-flex 모두 위와 같은 똑같은 화면 표시

✅ 체크 표시된 컨테이너 div에 flex 혹은 inline-flex로 스타일링을 하였을 때, 위와 같은 화면을 출력하며 둘의 큰 차이는 없다. 하지만, 이 flex와 inline-flex의 차이는 컨테이너 div가 하나 더 추가되었을 때 상황이 달라진다.

<div class="container">
    <div class="items item1">A</div>
    <div class="items item2">B</div>
    <div class="items item3">C</div>
</div>
<div class="container">
    <div class="items item1">A</div>
    <div class="items item2">B</div>
    <div class="items item3">C</div>
</div>

.container {
    display: flex;
}

container가 flex일 때

코드는 위와 같고, 컨테이너가 한 묶음 더 추가되었을 때, .container가 flex라면 위와 같은 화면을 출력한다.

.container {
    display: inline-flex;
}

container가 inline-flex일 때

하지만 컨테이너가 inline-flex라면 위와 같이 박스가 나란히 나열된 화면을 출력한다.

display: flex;

flex는 기본적으로 block 형태를 띠고 있다. container에 border를 적용하여 확인해보면 위와 같이 요소가 해당 가로폭을 다 차지하는 식으로 레이아웃을 구성하고 있다.(참고로 한 눈에 보기 쉽게 container에 padding도 적용해놓았다.)

display: inline-flex;

근데 여기서 inline-flex를 적용하게 되면, inline 성질이 되어 flex는 flex이지만 위와 같이 줄 바꿈 없이 엘리먼트가 한 줄에 같이 흐르게 되는 것이다.

이는 block과 inline-block의 맥락을 그대로 가지고 있는 것이라 어찌 보면 당연한 것인데, 막상 또 처음 봤을 때는 다른 뭔가가 있는 줄 알고 한참을 고민했다. 저녁을 먹고 샤워하다가 문득 이거 그냥 block, inline-block이랑 똑같은 거 아냐?! 하는 마음에 머리를 말리고 바로 컴퓨터 앞에 앉아 화면을 찍어보았고 해답을 찾게 되었다. 바로 이렇게 코드를 적어봤으면 진작에 이해가 갔을 것인데 샘플 코드를 머리로만 상상하니까 이 점을 바로 캐치하기 힘들었다..!

무튼 이렇게 오늘도 Flexbox 레이아웃에 대해 하나 더 알아간다! 👍🏻 그냥 지나칠 뻔했던 레이아웃 요소를 질문해준 태석님께 감사의 kudos를 날리며🌹 그럼 오늘의 TIL은 여기서 마무리! 이제 다음 과제하러 가보자.