CSS flexbox의 align-self 속성

정의 및 사용 방법

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

align-self 속성은 플렉스 컨테이너(부모)에 설정된 align-items 값을 개별 플렉스 아이템(자식)에서 재정의하여, 교차축 정렬을 독립적으로 설정합니다.

알아두세요!
align-self 속성은 flexbox, grid 레이아웃에서 공통으로 사용할 수 있습니다.
이 글에서는 flexbox에서의 align-self 속성만 설명합니다.

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

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

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

align-items 속성은 플렉스 컨테이너(부모)에 지정하며 교차축을 따라 모든 플렉스 아이템들의 기본 정렬 방식을 설정합니다.
이와는 별개로, align-self 속성을 개별 플렉스 아이템(자식)에 지정하면 교차축 정렬을 독립적으로 설정할 수 있습니다.

기본 예제

CSS

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

특징

이 속성은 개별 플렉스 아이템에 해당하는 요소에 지정해야 합니다.
플렉스 컨테이너에 직접 지정하면 적용되지 않습니다.

형식 구문

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

구문

CSS

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

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

값

align-self 속성의 값
`auto`	초깃값임. 플렉스 컨테이너(부모)에 설정된 `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`가 설정되어 있는 경우

주의할 점

플렉스 아이템의 교차축 시작 또는 끝 쪽에 해당하는 margin 값이 auto이면, align-self는 해당 아이템의 정렬에 영향을 주지 않습니다. 이 경우 정렬은 그 방향으로 설정된 margin의 auto 값에 의해 결정됩니다.

형식 정의

align-self 속성의 형식 정의
초깃값	`auto`
적용 요소	플렉스 아이템
상속	아니오
애니메이션	아니오

활용 예제

align-self는 플렉스 레이아웃에서 특정 아이템만 골라 교차축(Cross Axis) 방향의 정렬을 따로 설정할 때 사용합니다. "규칙적인 대열에서 혼자 또는 특정 패턴만 툭 튀어나와야 할 때", 실무 디자인에서 매우 유용하게 쓰입니다.

대표적인 예로 '채팅 UI'에서 상대방과 나의 말풍선을 구분하는 방식이 있습니다. 전체 채팅창은 하나지만, 내가 보낸 메시지만 오른쪽 끝으로 붙여야 할 때 align-self 하나로 간단히 해결할 수 있습니다.

HTML

<div class="chat-container">
    <div class="message"> <!-- 상대방 메시지 (기본 정렬) -->
        안녕하세요! 오늘 작업 어디까지 진행됐나요?
    </div>
    <div class="message my-message">
        방금 CSS 레이아웃 작업 끝냈습니다. 이제 align-self만 적용하면 돼요!
    </div>
    <div class="message"> <!-- 상대방 메시지 (기본 정렬) -->
        오, 좋네요! 채팅창 디자인이 훨씬 깔끔해 보이겠어요.
    </div>
    <div class="message my-message">
        네, 금방 완성해서 보여드릴게요! 🚀
    </div>
</div>

CSS

/* 채팅창 전체 박스 */
.chat-container {
    display: flex;
    flex-direction: column; /* 메시지를 위에서 아래로 쌓음 */
    justify-content: flex-start;
    align-items: stretch;
    gap: 12px; /* 메시지 사이 간격 */
    padding: 20px;
    max-width: 300px;
    background-color: #E9E9EB;
    border-radius: 10px;
}

/* 공통 메시지 스타일 */
.message {
    padding: 10px 15px;
    border-radius: 15px;
    font-size: 14px;
    line-height: 1.4;
    max-width: 80%; /* 메시지가 너무 길어지지 않게 제한 */
    background-color: #fff;
    box-shadow: 0 1px 2px rgba(0,0,0,0.1);
    align-self: flex-start; /* 상대방 메시지는 기본적으로 왼쪽 정렬 (flex-start) */
}

/* 내 메시지 (align-self의 핵심 활용) */
.my-message {
    background-color: #007AFF;
    color: #fff;
    border-bottom-right-radius: 2px; 
    align-self: flex-end; /* 부모의 정렬을 무시하고 나만 오른쪽 끝으로! */
}