[CSS] Flexbox와 Grid 정렬 속성 비교 align-, justify-, -items, -content

lexbox와 Grid 레이아웃에서 사용하는 align-items, align-content, justify-items, justify-content 속성은 컨테이너 내의 아이템을 배치하는 데 중요한 역할을 합니다. 각각의 차이점을 아래에 설명하겠습니다.

Flexbox에서 사용하는 속성들

1. align-items

• 설명: Flex 컨테이너 내의 아이템들을 교차 축(cross axis) 방향으로 정렬합니다. Flex 컨테이너의 flex-direction 속성에 따라 교차 축은 달라집니다.
• 값:
  • flex-start: 아이템들을 교차 축의 시작 지점에 정렬합니다.
  • flex-end: 아이템들을 교차 축의 끝 지점에 정렬합니다.
  • center: 아이템들을 교차 축의 중앙에 정렬합니다.
  • stretch: 아이템들을 컨테이너의 높이에 맞게 늘립니다.
  • baseline: 아이템들의 텍스트 베이스라인을 기준으로 정렬합니다.

.flex-container {
  display: flex;
  align-items: center; /* 예시: 아이템들을 중앙에 정렬 */
}​

2. align-content

• 설명: Flex 컨테이너의 여러 행들을 교차 축 방향으로 정렬합니다. 단일 행의 경우에는 효과가 없습니다.
• 값:
  • flex-start: 행들을 교차 축의 시작 지점에 정렬합니다.
  • flex-end: 행들을 교차 축의 끝 지점에 정렬합니다.
  • center: 행들을 교차 축의 중앙에 정렬합니다.
  • space-between: 행들 사이에 동일한 간격을 둡니다.
  • space-around: 행들 주위에 동일한 간격을 둡니다.
  • stretch: 행들을 컨테이너의 높이에 맞게 늘립니다.

.flex-container {
  display: flex;
  flex-wrap: wrap;
  align-content: space-between; /* 예시: 행들 사이에 동일한 간격 */
}

 

3. justify-content

• 설명: Flex 컨테이너 내의 아이템들을 주 축(main axis) 방향으로 정렬합니다.
• 값:
  • flex-start: 아이템들을 주 축의 시작 지점에 정렬합니다.
  • flex-end: 아이템들을 주 축의 끝 지점에 정렬합니다.
  • center: 아이템들을 주 축의 중앙에 정렬합니다.
  • space-between: 아이템들 사이에 동일한 간격을 둡니다.
  • space-around: 아이템들 주위에 동일한 간격을 둡니다.
  • space-evenly: 아이템들 사이에 동일한 간격을 둡니다.

.flex-container {
  display: flex;
  justify-content: center; /* 예시: 아이템들을 중앙에 정렬 */
}

 

 

 

Grid 레이아웃에서 사용하는 속성들

4. align-items

• 설명: Grid 컨테이너 내의 아이템들을 교차 축 방향으로 정렬합니다.
• 값: Flexbox의 align-items와 동일한 값들을 가집니다.

.grid-container {
  display: grid;
  align-items: center; /* 예시: 아이템들을 중앙에 정렬 */
}

 

5. align-content

• 설명: Grid 컨테이너의 여러 행들을 교차 축 방향으로 정렬합니다.
• 값: Flexbox의 align-content와 동일한 값들을 가집니다.

.grid-container {
  display: grid;
  align-content: space-between; /* 예시: 행들 사이에 동일한 간격 */
}

 

6. justify-items

• 설명: Grid 컨테이너 내의 각 그리드 아이템들을 주 축 방향으로 정렬합니다. 개별 그리드 아이템을 정렬하는 데 사용됩니다.
• 값:
  • start: 아이템들을 주 축의 시작 지점에 정렬합니다.
  • end: 아이템들을 주 축의 끝 지점에 정렬합니다.
  • center: 아이템들을 주 축의 중앙에 정렬합니다.
  • stretch: 아이템들을 컨테이너의 폭에 맞게 늘립니다.

.grid-container {
  display: grid;
  justify-items: center; /* 예시: 아이템들을 중앙에 정렬 */
}

 

7. justify-content

• 설명: Grid 컨테이너 내의 전체 그리드를 주 축 방향으로 정렬합니다.
• 값: Flexbox의 justify-content와 동일한 값들을 가집니다.

 

.grid-container {
  display: grid;
  justify-content: center; /* 예시: 전체 그리드를 중앙에 정렬 */
}

 

요약

• align-items (Flexbox & Grid): 교차 축 방향으로 아이템들을 정렬.
• align-content (Flexbox & Grid): 교차 축 방향으로 여러 행들을 정렬.
• justify-items (Grid): 주 축 방향으로 개별 그리드 아이템을 정렬.
• justify-content (Flexbox & Grid): 주 축 방향으로 아이템들을 정렬.

이 속성들은 Flexbox와 Grid 레이아웃에서 각각 아이템들을 정렬하고 배치하는 데 사용됩니다. Flexbox는 주로 일차원(행 또는 열) 레이아웃에, Grid는 이차원(행과 열) 레이아웃에 적합합니다.

 

by ChatGPT, 2024.07.22