교차축 정렬에는 align-items와 align-content 이다.

💡학습 목표💡

Flexbox 레이아웃에서 교차축은 주 축(main axis)에 수직인 축이다. 교차축 정렬을 위해 두 가지 주요 속성은 align-items와 align-content 이다.

 

교차축 정렬이란?

Flexbox 레이아웃에서 교차축(cross axis)은 주 축(main axis)에 수직인 축을 의미합니다. 교차축 정렬은 이 축을 따라 Flex 아이템들을 배치하는 방법입니다. 주 축이 수평 방향일 때 교차축은 수직 방향이 되고, 주 축이 수직 방향일 때 교차축은 수평 방향이 됩니다. 교차축 정렬을 위해 두 가지 주요 align-items와 align-content 속성을 사용합니다

 

1. align-items

align-items 속성은 Flex 컨테이너 내의 개별 Flex 아이템들을 교차축을 따라 정렬합니다. Flex 컨테이너의 높이와 관계없이 각 아이템의 위치를 지정할 수 있습니다.

• flex-start: 아이템들을 교차축의 시작 부분에 정렬합니다.
• flex-end: 아이템들을 교차축의 끝 부분에 정렬합니다.
• center: 아이템들을 교차축의 가운데에 정렬합니다.
• baseline: 아이템들을 텍스트의 기준선에 따라 정렬합니다.
• stretch (기본값): 아이템들을 Flex 컨테이너의 높이에 맞게 늘립니다.

2. align-content

align-content 속성은 Flex 컨테이너 내에서 여러 줄의 Flex 아이템들을 교차축을 따라 정렬합니다. 이는 단일 행 또는 단일 열이 아닌 여러 줄의 Flex 아이템을 조정할 때 사용됩니다.

• flex-start: 줄들을 교차축의 시작 부분에 정렬합니다.
• flex-end: 줄들을 교차축의 끝 부분에 정렬합니다.
• center: 줄들을 교차축의 가운데에 정렬합니다.
• space-between: 첫 번째 줄은 시작 부분에, 마지막 줄은 끝 부분에 정렬하고, 나머지 줄들은 사이에 고르게 분포시킵니다.
• space-around: 줄들 주위에 고르게 여백을 분포시킵니다.
• stretch (기본값): 줄들을 Flex 컨테이너의 높이에 맞게 늘립니다.

시나리오 코드 1

 

 

결과출력

 

 

시나리오 코드 2

 

 

결과출력