항목 정렬과 내용 정렬: 그리드 레이아웃에서 언제, 어떻게 사용합니까?

그리드 레이아웃의 항목 정렬과 내용 정렬의 차이점 이해

그리드 레이아웃에 대한 포괄적인 가이드를 참조하더라도 여전히 "align-items"와 "align-content" 컨테이너 속성 간의 차이점에 관한 질문이 있습니다. 명확히 하기 위해 용어를 분석해 보겠습니다.

• 그리드 컨테이너: 그리드의 서식 지정 컨텍스트를 설정하는 가장 바깥쪽 컨테이너.
• 그리드: 컨테이너를 그리드 항목이 포함된 상자(그리드 영역)로 나누는 수직 및 수평 선의 그리드.
• 그리드 항목: 그리드 컨테이너의 콘텐츠 흐름 내에 배치된 상자.

셀 내에서 그리드 항목을 정렬하려면 align-items 및 justify-items를 사용하고, justify-content 및 align-content를 사용하세요. 컨테이너 내에서 전체 그리드 자체를 정렬합니다.

이제 일반적인 오해를 해결해 보겠습니다.

주장: "-content" 속성이 존재하는 이유는 그리드는 컨테이너보다 작을 수 있으므로 정렬 공간이 확보됩니다.

수정: 그리드 크기가 컨테이너보다 작은 경우 "-content" 및 "-items" 속성이 모두 적용됩니다. 그러나 "-content" 속성만 그리드 전체 정렬에 영향을 주어 컨테이너 내 위치를 변경합니다.

예를 들어 아래 그림에서는 그리드가 컨테이너보다 작아서 공간이 남습니다. align-content: center를 사용하여 그리드를 세로로 중앙에 맞추고 justify-content: end를 사용하여 오른쪽 정렬합니다.

[그리드 레이아웃 이미지 주변에 공백이 있음]

반대로 그리드 크기가 컨테이너와 일치하면 배포할 공간이 없으며 align-content / justify-content는 아무런 효과가 없습니다.

align-items 및 justify-items는 그리드 영역 내에서 개별 그리드 항목을 정렬하고 align-content는 것을 기억하세요. justify-content 컨테이너 내에서 전체 그리드를 정렬합니다. 이러한 구별은 그리드 기반 디자인의 레이아웃과 위치를 조작할 때 매우 중요합니다.

위 내용은 항목 정렬과 내용 정렬: 그리드 레이아웃에서 언제, 어떻게 사용합니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!