CSS flexbox에서의 align-items와 justify-content 속성의 차이점

CSS의 Flexbox 레이아웃은 웹개발에 있어서 요소들을 효율적으로 배치하고 정렬하는 강력한 도구입니다.

그중에서도 'align-items'와 'justify-content' 속성은 중요한 역할을 합니다. 이 두 가지 속성은 순서대로 각각 수직 방향과 수평 방향의 정렬을 다루게 됩니다. 그 차이점을 명확히 이해하고 사용해야 매력적인 레이아웃을 만들 수 있습니다.

 

1. justify-content

'justify-content' 속성은 수평 방향(가로)을 다룹니다. 이 속성은 Flex 컨테이너 내부의 아이템들을 수평 축을 따라 정렬하는 데 사용됩니다.

 

어떤 값들이 사용되는지 알아보겠습니다.

• 'flex-start': 아이템들을 수직 축의 시작점에 정렬
• 'flex-end': 아이템들을 수직 축의 끝점에 정렬
• 'center': 아이템들을 수직 축의 중앙에 정렬
• 'baseline': 아이템들을 텍스트 기준선에 정렬
• 'stretch': 아이템들을 수직 축에 맞게 늘림(기본값)

좌측부터 flex-start, flex-end, flex-center

 

2. align-items

'align-items' 속성은 수직 방향(세로)을 다룹니다. 이 속성은 Flex 컨테이너 내부의 아이템들을 수직 축을 따라 정렬하는 데 사용됩니다.

 

마찬가지로 어떤 값들이 사용되는지 알아보겠습니다.

• 'flex-start': 아이템들을 수평 축의 시작점에 정렬
• 'flex-end': 아이템들을 수평 축의 끝점에 정렬
• 'center': 아이템들을 수평 축의 중앙에 정렬
• 'space-between': 첫 번째 아이템은 컨테이너의 시작 부분에, 마지막 아이템은 끝 부분에 정렬되고 나머지 아이템은 동일한 간격으로 분산 정렬
• 'space-around': 모든 아이템을 동일한 간격으로 분산 정렬(첫 번째와 마지막 아이템은 반 간격만큼 여백 있음)
• 'space-evenly': 모든 아이템을 동일한 간격으로 분산 정렬(첫 번째와 마지막 아이템도 동일한 간격)

flex-start

flex-end

center

space-between

space-around

space-evenly

 

이 두 속성은 Flexbox를 사용해 복잡한 레이아웃을 구성하는 데 필수적입니다. 'align-items'는 세로 방향 아이템 정렬에 사용되고, 'justify-content'는 가로 방향의 아이템 정렬에 사용됩니다. 이를 통해 웹개발자들은 다양한 디자인 요구사항에 맞춰 유연하고 효과적인 레이아웃을 만들 수 있습니다.