Flexbox: `align-items`와 `align-content`의 차이점은 무엇입니까?

Flexbox: align-content와 align-items의 차이점 이해

Flexbox 레이아웃의 경우 align-items 및 align- 콘텐츠 속성은 Flex 내에서 콘텐츠를 정렬하는 데 있어 고유한 목적을 제공합니다. containers.

align-items

align-items는 플렉스 컨테이너의 교차축을 따라 요소를 정렬합니다. 이 교차축은 flex-direction 속성에 의해 결정되는 주축의 방향과 수직입니다. 기본적으로 flex-direction: 행이므로 주축은 수평이고 교차축은 수직입니다.

align-items는 요소를 수직으로 정렬하기 위해 시작, 끝, 중심, 늘이기 및 확장 등 다양한 값을 가질 수 있습니다. Baseline.

align-content

반대로 align-content는 요소의 줄을 정렬합니다. 여러 줄의 플렉스 컨테이너. 요소 줄이 한 줄뿐인 경우 align-content는 효과가 없습니다. 이 속성은 제한된 컨테이너 너비로 인해 여러 줄이 형성될 때 작동합니다.

align-content도 다양한 값을 취합니다.

• flex-start: 요소의 줄이 위쪽으로 정렬됩니다. 포함 공간
• flex-end: 요소의 줄이 포함 공간의 아래쪽에 정렬
• center: 요소의 줄 요소가 포함된 공간의 중앙에 수직으로 정렬됩니다.
• space-between: 요소의 선이 수직 축을 따라 균등하게 배포되고 요소 사이에는 간격이 있습니다.
• space-around: 요소의 선이 공간을 따라 균등하게 배포됩니다. 전후에 간격이 있는 세로 축 그것들

예

다음 코드를 고려하세요.

.container {
  display: flex;
  flex-direction: row;
}

.item {
  align-items: center;
  align-content: space-around;
}

이 예에서 align-items: center는 하위 요소를 정렬합니다. 항목을 포함하는 공간의 중앙에 수직으로 배치합니다. align-content: space-around는 요소 사이와 뒤에 간격을 두고 요소의 줄을 수직으로 정렬합니다. 그 결과 각 줄 사이에 간격이 있는 요소가 수직으로 중앙에 배치됩니다.

위 내용은 Flexbox: `align-items`와 `align-content`의 차이점은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!