align-items

align-items

align-items 속성은 콘텐츠 아이템의 내부 상하관계 정렬 상태를 설정합니다.

---

align-items

align-items 속성은 콘텐츠 아이템의 내부 상하관계 정렬 상태를 설정합니다.

특징	설명
기본 값	align-items : stretch
적용	flexbox
버전	CSS3
시각적 표현	밑줄과 파란색으로 표시
사용성	★★★★★

정의(Definition)

• align-items 속성은 콘텐츠 아이템의 내부 상하관계 정렬 상태를 설정합니다.
• align-content 속성은 컨테이너의 높이 값을 기준으로 정렬하고 align-items 속성은 아이템의 높이 값을 기준으로 정렬합니다.

참고(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-items : stretch | center | flex-start | flex-end | baseline

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

속성(Property)

속성값	설명
stretch	요소의 정렬 상태를 기본 값으로 설정합니다.
center	요소의 정렬 상태를 가운데로 설정합니다.
flex-start	요소의 정렬 상태를 위쪽으로 설정합니다.
flex-end	요소의 정렬 상태를 아래쪽으로 설정합니다.
baseline	요소의 정렬 상태를 폰트를 기준으로 설정합니다.

예제1(Sample)

콘텐츠 아이템의 내부 상하관계 정렬 상태를 설정하는 예제입니다.

align-items : stretch align-items : center align-items : flex-start align-items : flex-end align-items : 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 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-items : stretch
    min-height: 300px;
}
.flex-box .item {
    width: 100px;
    height: 100px;
    background-color: #a2cbfa;
    margin: 1%;
}
.flex-box .item:nth-child(even){
    height: 150px;
}
.flex-box .item:nth-child(odd){
    height: 200px;
    font-size: 30px;
}

//Javascript none

호환성(Compatibility)

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

참고 사이트(Reference)

• MDN

---