Align-Items 대 Align-Content: \"-Content\"는 실제로 언제 중요합니까?

그리드 레이아웃에서 정렬 항목과 내용 정렬의 구별

그리드 레이아웃 작업 시 "좌우 정렬/정렬"의 차이점을 이해하세요. -items" 및 "justify/align-content"가 중요합니다. 이 문서에서는 특히 그리드 크기가 컨테이너보다 작은 시나리오로 인해 "-content" 속성이 존재한다는 주장과 관련하여 차이점을 명확히 하는 것을 목표로 합니다.

용어 정의

• 그리드 컨테이너: 그리드 및 그리드 항목의 상위 컨테이너로 그리드 서식을 설정합니다. 컨텍스트.
• 그리드: 컨테이너를 그리드 항목이 포함된 그리드 영역으로 나누는 수직 및 수평 선을 교차합니다.
• 그리드 항목: 유입 콘텐츠 그리드 컨테이너 내의 상자.

콘텐츠 정렬 vs. Align-Items

• Align-Content: 컨테이너 내의 그리드를 정렬합니다.
• Align-Items: 그리드를 정렬합니다. 내의 항목 Grid.

"-Content" 속성 명시

그리드가 컨테이너보다 작을 수 있으므로 "-content" 속성만 존재한다는 주장 오해의 소지가 있는. 제공된 그림에서 그리드는 실제로 더 작아서 align-content가 그리드를 수직으로 가운데에 배치하고 justify-content가 이를 오른쪽 정렬할 수 있는 공간을 허용합니다. 그러나 추가 공간이 없기 때문에 시각적 효과가 없더라도 그리드 크기가 컨테이너 크기와 같을 때 이러한 속성은 여전히 ​​적용됩니다.

사양 요약

• justify-self/justify-items: 그리드의 인라인 축 정렬 items.
• align-self/align-items: 그리드 항목의 블록 축 정렬.
• justify-content/align-content: 그리드 외부 가장자리가 컨테이너 콘텐츠 가장자리와 정렬되지 않는 경우 컨테이너 내에서 정렬이 이루어지지 않습니다.

위 내용은 Align-Items 대 Align-Content: \"-Content\"는 실제로 언제 중요합니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!