[css] (Flex box)align

align-items 속성 예제

align-items 속성 예제

Flexbox의 align-items 속성을 통해 아이템들의 수직 정렬을 조절하는 방법을 보여줍니다.

align-items: stretch (기본값)

아이템들이 컨테이너의 높이를 채웁니다.

사용 예시: 기본적인 Flexbox 레이아웃에서 사용

CSS 코드: .container {
display: flex;
align-items: stretch;
height: 200px;
}

1

2

align-items: flex-start

아이템들이 상단에 정렬됩니다.

사용 예시: 상단 정렬이 필요한 레이아웃에서 사용

CSS 코드: .container {
display: flex;
align-items: flex-start;
height: 200px;
}

1

2

align-items: flex-end

아이템들이 하단에 정렬됩니다.

사용 예시: 하단 정렬이 필요한 레이아웃에서 사용

CSS 코드: .container {
display: flex;
align-items: flex-end;
height: 200px;
}

1

2

align-items: center

아이템들이 수직 중앙에 정렬됩니다.

사용 예시: 배너나 헤더의 내용을 수직 중앙에 배치할 때

CSS 코드: .container {
display: flex;
align-items: center;
height: 200px;
}

1

2

align-items: baseline

아이템들이 기준선에 맞춰 정렬됩니다.

사용 예시: 텍스트 기준선을 맞추고 싶을 때

CSS 코드: .container {
display: flex;
align-items: baseline;
height: 200px;
}

1

2

align-content: stretch

다중 줄의 컨테이너에서 줄들이 컨테이너의 높이를 채웁니다.

사용 예시: 다중 줄의 레이아웃에서 줄들의 수직 정렬을 조절할 때

CSS 코드: .container {
display: flex;
flex-wrap: wrap;
align-content: stretch;
height: 400px;
}

align-content의 효과를 보려면:
1. flex-wrap: wrap을 사용하여 줄바꿈이 발생하도록 해야 합니다.
2. 컨테이너의 높이가 아이템들의 총 높이보다 커야 합니다.
이렇게 하면 여러 줄이 생기고, align-content가 각 줄의 수직 정렬을 조절합니다.

1

2

3

4

align-self: flex-end

개별 아이템의 수직 정렬을 컨테이너의 다른 아이템들과 다르게 설정합니다.

사용 예시: 특정 아이템만 다른 위치에 배치하고 싶을 때

CSS 코드: .container {
display: flex;
height: 200px;
}
.item-1 {
align-self: flex-end;
}

이 예제에서:
1. 첫 번째 아이템(1)은 align-self: flex-end를 적용하여 컨테이너의 하단에 정렬됩니다.
2. 두 번째 아이템(2)은 align-self가 적용되지 않아 기본 align-items에 따라 정렬됩니다.

align-self는 align-items의 개별 아이템 버전으로 생각하면 됩니다:
- align-items는 모든 아이템에 동일하게 적용됩니다.
- align-self는 특정 아이템에만 적용됩니다.

1
align-self: flex-end로 하단 정렬

2
기본 정렬

3
align-self: center로 중앙 정렬

4
align-self: flex-start로 상단 정렬

5
align-self: baseline로 기준선 정렬