CSS flexbox의 align-items 속성

정의 및 사용 방법

flexbox에서 align-items 속성은 플렉스 컨테이너에서 플렉스 아이템이 배치되는 교차축(cross axis)을 기준으로 아이템들을 어떻게 정렬할지를 지정합니다.

'플렉스 레이아웃'은 일반적인 '블록 레이아웃'보다 유연하고 다양한 레이아웃을 구현할 수 있습니다.
플렉스 컨테이너 내부에서는 콘텐츠가 플렉스 아이템 단위로 배치됩니다.

이때, flex-direction 속성은 플렉스 아이템이 배치되는 흐름의 기준이 되는 주축(main axis, 기본 축)을 결정합니다.

이 주축(main axis, 기본 축)과 수직으로 교차하는 방향의 축을 교차축(cross axis)이라고 합니다.

align-items 속성은 교차축을 따라 플렉스 아이템들을 어떻게 정렬할지를 지정합니다.

특징

이 속성은 플렉스 컨테이너에 해당하는 요소에만 적용됩니다.
플렉스 아이템이나 일반 요소에 지정하면 적용되지 않습니다.

기본 예제

CSS

.flex-container {
    display: flex; /* 플렉스 컨테이너 생성 */
    height: 150px;
    border: 4px solid silver;
    flex-direction: row; /* 주축(main axis, 기본 축)을 결정 */
    align-items: /* value <= 라이브 데모에서 동적으로 구현 */
}
.item { /* 플렉스 아이템 */
     border: 4px solid blue;
     background-color: yellow;
}
.item-1, item-3 {
    font-size: 20px;
}
.item-2 {
    font-size: 50px;
}
/*
 * 일부 스타일 코드는 가독성을 위해 생략했습니다!
*/

형식 구문

이 형식 구문(Formal syntax)은 CSS Flexible Box Layout Module Level 1 명세서를 기준으로 작성되었습니다.
align-items 속성은 flexbox뿐만 아니라 grid 레이아웃에서도 사용되며, 전체 정렬 구문은 CSS Box Alignment Module Level 3 명세서를 참고하세요.

구문

CSS

/* 키워드 값 */
align-items: flex-start;
align-items: flex-end;
align-items: center;
align-items: baseline;
align-items: stretch; /* 초깃값 */

/* 글로벌 값 */
align-items: inherit;
align-items: initial;
align-items: revert;
align-items: revert-layer;
align-items: unset;

값

align-items 속성의 값
`flex-start`	플렉스 아이템들을 교차축의 시작 쪽을 기준으로 정렬합니다.
`flex-end`	플렉스 아이템들을 교차축의 끝 쪽을 기준으로 정렬합니다.
`center`	플렉스 아이템들을 교차축의 시작과 끝 쪽의 가운데를 기준으로 정렬합니다.
`baseline`	플렉스 아이템들을 교차축의 baseline을 기준으로 맞춰 정렬합니다. 플렉스 아이템들의 요소 박스 기반의 정렬이 아니라, 내부 텍스트의 기준선(baseline)을 기준으로 정렬합니다. baseline이란 글자의 "기준선"이라고도 말하며, 영어의 소문자에서 `g`,`j`, `q` 등과 같이 글자 하단 밑의 아래까지 표시되는 글자와 그렇지 않는 경계의 "기준이 되는 선"을 의미합니다. 한글을 비롯하여 동남아의 글자에는 baseline 밑의 아래까지 표시되는 글자가 없습니다. 만약 플렉스 아이템 내부에 텍스트가 없거나, 교차축에 맞는 baseline이 없는 경우에는 플렉스 아이템의 `border-box`(테두리 박스)의 교착축 시작 쪽를 baseline으로 대신 사용됩니다.
`stretch`	초깃값임. 플렉스 아이템들이 교차축 방향으로 여유 공간이 있으면 채우도록 늘어납니다. 이때, 교차축 방향에 대한 플렉스 아이템의 크기에 대한 제약 조건이 있으면, 제약 조건을 준수합니다. 플렉스 아이템의 크기에 대한 제약 조건은 다음과 같습니다. 플렉스 아이템에 교차축 시작 또는 끝 쪽에 해당하는 `margin`이 `auto`로 설정되어 있는 경우 플렉스 아이템에 교차축 방향에 해당하는 크기가 `auto`로 설정되어 있지 않은 경우 교차축이 세로 방향이면 `height`가 `auto` 값이 아닌 경우 교차축이 가로 방향이면 `width`가 `auto` 값이 아닌 경우 플렉스 아이템에 교차축 방향에 해당하는 최소 크기가 설정되어 있는 경우 교차축이 세로 방향이면 `min-height`가 설정되어 있는 경우 교차축이 가로 방향이면 `min-width`가 설정되어 있는 경우 플렉스 아이템에 교차축 방향에 해당하는 최대 크기가 설정되어 있는 경우 교차축이 세로 방향이면 `max-height`가 설정되어 있는 경우 교차축이 가로 방향이면 `max-width`가 설정되어 있는 경우

`flex-direction: column`과 `align-items`

flex-direction 속성의 값이 column일 경우 align-items 속성에 대한 값과 그 효과가 어떻게 달라지는지 라이브 데모로 확인해 보세요.

CSS

.flex-container {
    display: flex; /* 플렉스 컨테이너 생성 */
    width: 33px;
    height: 280px;
    border: 4px solid silver;
    flex-direction: column; /* 주축(main axis, 기본 축)을 결정 */
    align-items: /* value <= 라이브 데모에서 동적으로 구현 */
}
.item { /* 플렉스 아이템 */
     border: 4px solid blue;
     background-color: yellow;
}
.item-1, item-3 {
    font-size: 20px;
}
.item-2 {
    font-size: 50px;
}
/*
 * 일부 스타일 코드는 가독성을 위해 생략했습니다!
*/

부연설명
위 라이브 데모에서 align-items: baseline;인 경우 플렉스 아이템들은 세로 방향으로 정렬되어 있기 때문에 교차축에 맞는 baseline이 없습니다. 이럴 경우 플렉스 아이템의 교착축 시작 쪽인 왼쪽 border-box(테두리 박스)가 baseline으로 대신 사용됩니다.

형식 정의

align-items 속성의 형식 정의
초깃값	`stretch`
적용 요소	플렉스 컨테이너
상속	아니오
애니메이션	아니오

활용 예제

align-items 속성은 실무에서 특정 박스의 콘텐츠 레이아웃을 설정하는 데 정말 많이 사용됩니다.
아래는 그중에서도 가장 대표적이라고 할 수 있는 '내비게이션 바 메뉴의 세로 가운데 정렬'과 콘텐츠 길이에 상관없이 높이를 통일하는 '카드 레이아웃의 높이 자동 맞춤'에 대한 활용 예제입니다.

내비게이션 바 메뉴의 세로 가운데 정렬

HTML

<header class="site-header">
    <div class="logo">
        <a href="">Your Logo</a>
    </div>
    <div class="user-actions">
        <a href="">로그인</a>
        <a href="" class="btn-signup">회원가입</a>
    </div>
</header>

CSS

.site-header {
    display: flex;
    justify-content: space-between; /* 로고와 사용자 액션 버튼을 양쪽 끝으로 배치 */
    align-items: center; /* 세로 축의 중앙에 배치하여 수직 정렬을 맞춤 */
    padding: 0 2em;
    height: 100px;
    background-color: #e3f2fd;
}
.logo a {
    font-weight: bold;
    color: #1976d2;
    text-decoration: none;
}
.user-actions a {
    margin-left: 1.5em;
    color: #666;
    text-decoration: none;
    font-size: 0.9em;
}
.user-actions .btn-signup {
    padding: 0.5em 1em;
    background-color: #1976d2;
    color: #fff;
    border-radius: 4px;
}

코드 부연설명
flexbox에서 justify-content 속성은 플렉스 아이템이 배치되는 주축(main axis)을 따라 플렉스 아이템을 어떻게 정렬할지 결정합니다. justify-content: space-between은 로고와 사용자 액션 버튼을 주축의 양쪽 끝으로 배치합니다.

카드 레이아웃의 높이 자동 맞춤

HTML

<div class="card-container">
    <section class="card">
        <h3>짧은 제목</h3>
        <p>이 카드는 콘텐츠가 적습니다.</p>
    </section>
    <section class="card">
        <h3>내용이 아주 많은 제목</h3>
        <p>이 카드는 설명이 매우 길어서 전체적인 높이를 결정하게 됩니다. 
           하지만 옆에 있는 카드도 이 카드와 동일한 높이로 자동 조절됩니다.</p>
    </section>
</div>

CSS

.card-container {
    display: flex;
    /* 기본값이 stretch이므로 생략 가능하지만, 학습을 위해 명시 */
    align-items: stretch; 
    gap: 20px; /* 플렉스 아이템 간격 설정 */
    padding: 20px;
}
.card {
    flex: 1; /* 카드 너비를 동일하게 배분 */
    padding: 20px;
    background-color: #ffffff;
    border: 1px solid #ddd;
    border-radius: 8px;
    background-color: #f9f9f0;
    box-shadow: 0 2px 4px rgba(0,0,0,0.05);
}

브라우저 호환성

flexbox의 align-items 속성 브라우저 호환성
속성	데스크탑 Chrome	데스크탑 Edge	데스크탑 Firefox	Safari
`align-items`	29	12	20	9
Flex 레이아웃에서 지원됨	52	12	20	9

명세서

flexbox의 align-items 속성 명세서 사양
명세서 사양
`align-items`	CSS Flexible Box Layout Module Level 1 #align-items-property

참고문헌

MDN - align-items