CSS 그리드 레이아웃에서 `align-items`와 `align-content`는 어떻게 다릅니까?

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

그리드 레이아웃 종합 가이드에서 "정렬/항목 정렬"의 개념은 " 및 "정렬/정렬-내용" 속성이 도입되었습니다. 저자는 그리드 크기가 컨테이너보다 작을 때 "-content" 속성이 활용된다고 제안했지만 이 개념은 두 속성 세트 모두에 적용됩니다.

그리드 시스템의 구성 요소 정의

• 그리드 컨테이너: 그리드와 해당 항목을 둘러싸는 상위 요소로 서식을 설정합니다. 컨텍스트.
• 그리드: 그리드 항목이 차지할 영역을 형성하는 교차 선의 그리드.
• 그리드 항목: 그리드 내에 배치된 요소

그리드와 그리드의 정렬 항목

justify-content 및 align-content 속성은 컨테이너 내의 그리드 정렬을 제어하는 ​​반면 justify-self, justify-items, align-self 및 align-items는 개별 그리드 항목의 정렬을 제어합니다. .

개념 설명

그림과 같이 컨테이너보다 작은 그리드를 생각해 보세요. 아래:

[컨테이너에 추가 공간이 있는 그리드 레이아웃 이미지]

이 시나리오에서는 justify-content 및 align-content 속성을 사용하여 추가 공간을 분배할 수 있습니다. 예를 들어 justify-content: end는 그리드를 오른쪽 정렬하고 align-content: center는 수직으로 가운데에 정렬합니다.

크기 고려 사항을 넘어서

그리드 크기가 컨테이너 크기와 일치하더라도 정렬 -content 및 justify-content 속성은 계속 작동합니다. 그리드 트랙 사이에 여유 공간을 분배하는 space-around, space-between, space-evenly와 같은 간격 옵션을 활성화합니다.

사양 하이라이트

CSS 그리드 레이아웃 사양은 이러한 역할을 명확히 합니다. 속성:

• 10.3: 행 축 정렬: justify-self 및 justify-items는 그리드 항목을 수평으로 정렬합니다.
• 10.4: 열-축 정렬: align-self 및 align-items는 그리드 항목을 수직으로 정렬합니다.
• 10.5: 그리드 정렬: justify-content 및 align-content 그리드 정렬 그리드의 외부 가장자리가 컨테이너의 콘텐츠 가장자리와 일치하지 않는 경우 컨테이너 내에서.

위 내용은 CSS 그리드 레이아웃에서 `align-items`와 `align-content`는 어떻게 다릅니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!