CSS 그리드 레이아웃에서 `justify-content`, `justify-items` 및 `justify-self`는 어떻게 다릅니까?

CSS 그리드의 justify-self, justify-items 및 justify-content 이해

이 둘 사이의 유사점과 차이점에 대한 혼란 문서가 그리드보다는 Flex-box에 초점을 맞추는 경우가 많기 때문에 세 가지 속성은 이해할 수 있습니다. 명확히 하려면:

1. Flex-box와 그리드 속성

justify-self 및 justify-items 속성은 Flex-box에서 구현되지 않습니다. 이러한 구별은 단일 항목을 정당화하는 것이 불가능하게 만드는 Flex-box의 1차원 특성에서 비롯됩니다. 따라서 Flex-box는 주축을 따라 정렬하기 위해 justify-content 속성을 사용합니다.

2. justify-self, justify-items 및 justify-content

• justify-content의 역할: 행 축을 따라 전체 그리드를 정렬합니다. 이 속성은 가로 방향의 그리드 항목 사이의 간격을 제어합니다.
• justify-items: 행 축을 따라 개별 그리드 항목 내부의 콘텐츠를 정렬합니다. 이는 그리드 셀 내의 콘텐츠 정렬에 영향을 줍니다.
• justify-self: 행 축을 따라 상위 그리드 셀 내의 현재 그리드 항목을 정렬합니다. 이 속성은 특정 그리드 항목의 정렬을 개별적으로 조정합니다.

3. 주요 차이점

다음 시각적 자료는 이러한 속성 간의 차이점을 명확하게 보여줍니다.

[콘텐츠, 그리드 항목 및 그리드가 서로 다르게 정렬된 그리드 레이아웃 이미지 자체]

추가 리소스

추가 정보를 보려면 다음을 참조하세요 기사:

• https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Grid_Layout/Box_Alignment_in_CSS_G rid_Layout
• https://www.smashingmagazine.com/2017/06/building-production-ready-css-grid-layout/

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