CSS의 align-self 속성은 무엇입니까?

1. align-self 속성은 측면 축(세로 축) 방향으로 플렉스 항목의 정렬을 개별적으로 정의합니다.

2. align-self에는 flex 컨테이너에서 상속된 align-items 속성 값을 나타내는 추가 auto(기본값)가 있습니다.

예

 .컨테이너{
/* 플렉스 컨테이너 정의 */
디스플레이: 플렉스;
/*
컨테이너 행 내부 요소의 배열 방향 설정: 배열 방향을 왼쪽에서 오른쪽으로 정의합니다. 행 역방향: 오른쪽에서 왼쪽 열: 위에서 아래로 열 역방향: 아래에서 위로
*/
플렉스 방향: 행;

/*
교차 축 스트레치에서 컨테이너의 요소 정렬 설정: 요소의 높이가 설정되지 않은 경우 요소의 높이는 컨테이너와 동일한 높이로 늘어납니다(기본값).
flex-start: 교차 축의 시작 위치(위/왼쪽) 방향 Align flex-end: 교차 축의 끝 위치(아래/오른쪽) 방향 정렬 중심: 중앙 정렬 기준선: 요소는 동시에 기준선입니다(모든 텍스트가 같은 줄에 있는지 확인).
*/

항목 정렬: 기준선;

높이: 800upx;
배경색: #FFC0CB;

}

.txt{
글꼴 크기: 20px;
너비: 150upx;
높이: 150upx;
}

.빨간색{
배경색: 빨간색;

/*
교차 축에서 컨테이너의 요소 정렬을 다시 작성합니다. auto: 기본값, 상위 요소의 align-items 속성 상속을 나타냅니다. 컨테이너로서의 높이(기본값)
flex-start: 교차 축의 시작 위치(위/왼쪽) 방향 Align flex-end: 교차 축의 끝 위치(아래/오른쪽) 방향 정렬 중심: 중앙 정렬 기준선: 요소는 동시에 기준선입니다(모든 텍스트가 같은 줄에 있는지 확인).
*/
align-self: 중앙;
}

.녹색{
배경색: 녹색;
}

.파란색{
배경색: 파란색;
}

위 내용은 CSS의 align-self 속성에 대한 소개입니다. 모든 사람에게 도움이 되기를 바랍니다.