"일꾼이 일을 잘하려면 먼저 도구를 갈고 닦아야 한다." - 공자, 『논어』.
첫 장 > 프로그램 작성 > CSS 그리드 레이아웃이``정당화 ",`정당화-회의 '및'정당화-셀프 '는 어떻게 다릅니 까?

CSS 그리드 레이아웃이``정당화 ",`정당화-회의 '및'정당화-셀프 '는 어떻게 다릅니 까?

2025-02-25에 게시되었습니다
검색:226

How Do `justify-content`, `justify-items`, and `justify-self` Differ in CSS Grid Layout?

1. Flex-Box와 그리드 특성의 관계

정당화 및 정당화 항목 속성은 Flex-Box에서 구현되지 않습니다. 이 차이점은 Flex-Box의 1 차원 특성에서 비롯되며, 이는 단일 항목을 불가능하게 만듭니다. 따라서 Flex-Box는 기본 축을 따라 정렬을 위해 정당한 컨텐츠 속성에 의존합니다.

2. 정당화, 정당화 및 정당화 컨텐츠의 역할

정당화 컨텐츠

의 역할 : 전체 그리드를 행 축을 따라 정렬합니다. 이 속성은 수평 방향으로 그리드 항목 간 간격을 제어합니다.
  • 정당화-항목 : 행 축을 따라 개별 그리드 항목 내부의 내용을 정렬합니다. 그리드 셀 내의 컨텐츠의 정렬에 영향을 미칩니다.
  • 정당화 self : 행 축을 따라 부모 그리드 셀 내의 현재 그리드 항목을 정렬합니다. 이 속성은 특정 그리드 항목의 정렬을 개별적으로 조정합니다.
  • 3. 주요 차이점

  • 다음 시각 보조는 이러한 속성들 사이의 차이점을 명확하게 보여줍니다. 자체]

추가 리소스

추가 통찰력은 다음을 참조하십시오 기사 :

https://developer.mozilla.org/en-us/docs/web/css/css_grid_layout/box_alignment_in_css_gr id_layout

https://www.smashingmagazine.com/2017/06/building-production-ready-css-grid-layout/

최신 튜토리얼 더>

부인 성명: 제공된 모든 리소스는 부분적으로 인터넷에서 가져온 것입니다. 귀하의 저작권이나 기타 권리 및 이익이 침해된 경우 자세한 이유를 설명하고 저작권 또는 권리 및 이익에 대한 증거를 제공한 후 이메일([email protected])로 보내주십시오. 최대한 빨리 처리해 드리겠습니다.

Copyright© 2022 湘ICP备2022001581号-3