align-self

align-self

align-self 속성은 개별적인 콘텐츠 아이템의 정렬 상태를 설정합니다.

---

align-self

align-self 속성은 개별적인 콘텐츠 아이템의 정렬 상태를 설정합니다.

특징	설명
기본 값	align-self : auto
적용	flexbox
버전	CSS3
사용성	★★☆☆☆

정의(Definition)

• align-self 속성은 개별적인 플렉스 아이템의 정렬 상태를 설정합니다.
• align-self 속성은 플렉스 아이템에 설정하고, align-item와 align-content는 플렉스 컨테이너에 설정합니다.

참고(Reference)

• flex는 효율적으로 요소를 배치하거나 정렬 할 수 있는 레이아웃 방식입니다.
• flex에서 사용하는 속성은 부모 요소인 컨테이너(Container)와 자식 요소인 아이템(Item)으로 구성됩니다.
• 플렉스 컨테이너에는 flex-direction, flex-wrap, justify-content, align-items, align-content가 있습니다.
• 플렉스 아이템에는 flex, flex-grow, flex-shrink, flex-basis, align-self, order가 있습니다.

Flex와 관련된 속성(Flex Related Properties)

• align-content 속성은 콘텐츠 아이템의 상하관계 정렬 상태를 설정합니다.
• align-items 속성은 콘텐츠 아이템의 내부 상하관계 정렬 상태를 설정합니다.
• align-self 속성은 개별적인 콘텐츠 아이템의 정렬 상태를 설정합니다.
• flex 속성은 콘텐츠의 성질을 flex로 설정합니다.
• flex-basis 속성은 콘텐츠 아이템의 기본 값을 설정합니다.
• flex-direction 속성은 콘텐츠 아이템의 정렬 방향을 설정합니다.
• flex-flow 속성은 콘텐츠 아이템의 정렬 방향과 줄 속성을 설정합니다.
• flex-grow 속성은 콘텐츠 아이템의 크기를 숫자를 통해 확대 설정합니다.
• flex-shrink 속성은 콘텐츠 아이템의 크기를 숫자를 통해 축소 설정합니다.
• flex-wrap 속성은 콘텐츠 아이템의 줄 속성을 설정합니다.
• justify-content 속성은 콘텐츠 아이템의 좌우 관계 정렬 상태를 설정합니다.
• order 속성은 콘텐츠 아이템의 순서를 설정합니다.

문법(Syntax)

align-self: auto | stretch | center | flex-start | flex-end | baseline

/* 기본 속성 */
align-self : auto
align-self : stretch
align-self : center
align-self : flex-start
align-self : flex-end
align-self : baseline

속성(Property)

속성값	설명
auto	요소의 정렬 상태를 기본으로 설정합니다.
stretch	요소의 가로 영역 값을 최대로 설정합니다.
center	요소의 정렬을 가운데로 설정합니다.
flex-start	요소의 정렬을 시작점으로 설정합니다.
flex-end	요소의 정렬을 끝점으로 설정합니다.
baseline	요소의 정렬을 폰트를 기준으로 설정합니다.
inherit	요소의 속성 값을 상위 요소한테 상속받습니다.

예제1(Sample)

개별적인 플렉스 아이템의 정렬 상태를 설정하는 예제입니다.

align-self: auto align-self: stretch align-self: center; align-self: flex-start align-self: flex-end align-self: baseline

아이템

박스크기

HTML

CSS

SCRIPT

<div class="flex-box">
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
</div>

.flex-box {
    display: flex;
    flex-wrap: wrap;
    align-self: auto;
    min-height: 300px;
}
.flex-box .item {
    width: 100px;
    height: 100px;
    background-color: #a2cbfa;
    margin: 1%;
}

//Javascript none

호환성(Compatibility)

						6	7	8	9	10	11
align-items	○	○	○	○	○	❌	❌	❌	❌	❌	○	○	○	○

참고 사이트(Reference)

• MDN

---