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	요소의 정렬 상태를 폰트를 기준으로 설정합니다.

예제

HTML 예제

CSS 예제

.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;
}