align-content

align-content

CSS의 align-content 속성 세트에 따라 측정 사이의 공간 분포와 주변 콘텐츠 항목 인 flexbox 의 교차 축 또는 그리드 의 블록 축.

아래의 대화식 예제는 그리드 레이아웃을 사용하여이 속성의 일부 값을 보여줍니다.

이 프로퍼티는 단선 플렉스 컨테이너 (예 flex-wrap: nowrap ) 에는 영향을 미치지 않습니다 .

/ * 기본 위치 정렬 * /
/ * align-content는 왼쪽과 오른쪽 값을 취하지 않습니다 * /
align-content: center;     / * 중앙에 아이템을 포장 * /
align-content: start;      / * 처음부터 팩 아이템 * /
align-content: end;        / * 마지막부터 포장 아이템 * /
align-content: flex-start; / * 처음부터 플렉스 아이템 포장 * /
align-content: flex-end;   / * 끝에서 플렉스 아이템 포장 * /

/ * 일반 정렬 * /
align-content: normal;

/ * 기준선 정렬 * /
align-content: baseline;
align-content: first baseline;
align-content: last baseline;

/ * 분산 정렬 * /
align-content: space-between; / * 항목을 균등하게 배포 첫 번째 항목은 시작 부분과 플러시되고 마지막 항목은 끝 부분과 플러시 * /
align-content: space-around;  / * 항목을 균등하게 배포 항목은 양쪽 끝에 절반 크기의 공간이 있습니다 * /
align-content: space-evenly;  / * 항목을 균등하게 분배 항목 주위에 동일한 공간이 있습니다 * /
align-content: stretch;       / * 항목을 균등하게 배포 컨테이너에 맞게 '자동'크기 항목을 늘립니다. * /

/ * 오버플로 정렬 * /
align-content: safe center;
align-content: unsafe center;

/ * 글로벌 값 * /
align-content: inherit;
align-content: initial;
align-content: revert;
align-content: unset;

Values

start

항목은 교차 축에서 정렬 컨테이너의 시작 가장자리에 대해 서로 같은 높이로 포장됩니다.

end

항목은 교차 축에서 정렬 컨테이너의 끝 가장자리에 대해 서로 같은 높이로 포장됩니다.

flex-start

항목은 플렉스 컨테이너의 교차 시작 측면에 따라 정렬 컨테이너의 가장자리에 대해 서로 같은 높이로 포장됩니다. 이것은 플렉스 레이아웃 항목에만 적용됩니다. 플렉스 컨테이너의 자식이 아닌 항목의 경우 이 값은 start 처럼 처리 됩니다.

flex-end

항목은 플렉스 컨테이너의 크로스 엔드 측면에 따라 정렬 컨테이너의 가장자리에 대해 서로 같은 높이로 포장됩니다. 이것은 플렉스 레이아웃 항목에만 적용됩니다. 플렉스 컨테이너의 자식이 아닌 항목의 경우 이 값은 end 처럼 처리 됩니다.

center

항목은 교차 축을 따라 정렬 컨테이너의 중앙에서 서로 같은 높이로 포장됩니다.

normal

align-content 값이 설정 되지 않은 것처럼 항목이 기본 위치에 포장됩니다 .

baseline, first baseline, last baseline

첫 번째 또는 마지막 기준선 정렬에 대한 참여를 지정합니다. 상자의 첫 번째 또는 마지막 기준선 집합의 정렬 기준선을 기준선 공유 그룹에 있는 모든 상자의 공유된 첫 번째 또는 마지막 기준선 집합의 해당 기준선과 정렬합니다.

first baseline 대한 대체 정렬 은 start 이고 last baseline 대한 대체 정렬 은 end 입니다.

space-between

항목은 교차 축을 따라 정렬 컨테이너 내에서 고르게 분포됩니다. 인접한 항목의 각 쌍 사이의 간격은 동일합니다. 첫 번째 항목은 교차 축에서 정렬 컨테이너의 시작 가장자리와 같은 높이이고 마지막 항목은 교차 축에서 정렬 컨테이너의 끝 가장자리와 같은 높이입니다.

space-around

품목은 정렬 용기 내에서 횡축을 따라 균일하게 분포된다. 인접한 항목의 각 쌍 사이의 간격은 동일합니다. 첫 번째 항목 앞과 마지막 항목 앞의 빈 공간은 인접한 각 항목 쌍 사이의 공간의 절반과 같습니다.

space-evenly

항목은 교차 축을 따라 정렬 컨테이너 내에서 고르게 분포됩니다. 각 인접 항목 쌍, 시작 가장자리와 첫 번째 항목, 끝 가장자리와 마지막 항목 사이의 간격은 모두 정확히 동일합니다.

stretch

가로 축을 따라 항목의 결합 된 크기가 정렬 컨테이너의 크기보다 작 으면 auto 크기 항목의 크기는 비례가 아닌 동일하게 증가하지만 max-height / max-width 에 의해 부과 된 구속 조건은 그대로 유지합니다. 결합 된 크기가 십자선을 따라 정렬 컨테이너를 정확하게 채 웁니다.

safe

맞춤 키워드와 함께 사용됩니다. 선택된 키워드가 항목이 정렬 컨테이너를 오버 플로우하여 데이터 손실을 유발한다는 것을 의미하는 경우, 정렬 모드가 start 것처럼 항목이 대신 정렬됩니다 .

unsafe

맞춤 키워드와 함께 사용됩니다. 항목 및 정렬 컨테이너의 상대 크기와 데이터 손실을 유발하는 오버플로 발생 여부에 관계없이 지정된 정렬 값이 적용됩니다.