[CSS] Flex에서 글자 라인 맞추기

다른 크기의 글자를 flex의 'align-items:flex-end'를 통하여 나열하면 다음 예시와 같이 요소들이 flex 컨테이너의 아래 배치되지만 글자 라인은 맞지 않는다.

<style>
    * {
        margin: 0;
        padding: 0;
    }
    
    .test-flex {
        display: flex;
        gap: 5px;
        border: 1px solid gray;
        align-items: flex-end;
    }

    .test-flex > * {
        border: 1px solid lightgray;
    }

</style>

<div class="test-flex end">
    <h1>Hello</h1>
    <h3>World</h3>
    <h2>안녕</h2>
    <h4>세상아</h4>
</div>

 

이 경우 'align-items: baseline'을 이용하면 글자 라인에 맞출 수 있다.

<style>
    * {
        margin: 0;
        padding: 0;
    }
    
    .test-flex {
        display: flex;
        gap: 5px;
        border: 1px solid gray;
        align-items: baseline;
    }

    .test-flex > * {
        border: 1px solid lightgray;
    }

</style>

<div class="test-flex end">
    <h1>Hello</h1>
    <h3>World</h3>
    <h2>안녕</h2>
    <h4>세상아</h4>
</div>