CSS에서 플렉스 박스의 교차 축 정렬
이제 블록을 교차 축을 따라 정렬해 보겠습니다. 이 축을 따른 정렬은
align-items 속성으로 지정합니다.
값 flex-start는 요소를 축의 시작점으로,
값 flex-end는 끝점으로 밀어냅니다.
예제를 통해 알아보겠습니다.
예제
주축을 왼쪽에서 오른쪽으로 설정하겠습니다. 이 경우 교차 축은 위에서 아래로 향합니다. 우리 블록의 위치를 주축과 교차 축 모두에 대해 조절해 보겠습니다.
주축을 따라 블록을 축의 시작점, 즉 왼쪽 가장자리로 밀어보겠습니다.
이를 위해 justify-content를
값 flex-start로 설정합니다.
교차 축을 따라 블록을 축의 시작점, 즉 상단 가장자리로 밀어보겠습니다.
이를 위해 align-items 역시
값 flex-start로 설정합니다.
결과를 확인해 보겠습니다:
.parent {
display: flex;
flex-direction: row; /* 주축 오른쪽, 교차 축 아래 */
justify-content: flex-start; /* 블록을 주축 시작점으로 */
align-items: flex-start; /* 블록을 교차 축 시작점으로 */
}
코드 실행 결과:
예제
이제 블록을 교차 축의 끝점, 즉 하단으로 밀어보겠습니다.
이를 위해 align-items를
값 flex-end로 설정합니다:
.parent {
display: flex;
flex-direction: row; /* 주축 오른쪽, 교차 축 아래 */
justify-content: flex-start; /* 블록을 주축 시작점으로 */
align-items: flex-end; /* 블록을 교차 축 끝점으로 */
}
코드 실행 결과:
예제
이제 주축을 위에서 아래로 설정하겠습니다. 주축이 수직이므로 교차 축은 오른쪽에서 왼쪽으로 향합니다. 두 축 모두에 대해 블록을 해당 축의 시작점으로 밀어보겠습니다:
.parent {
display: flex;
flex-direction: column; /* 주축 아래, 교차 축 오른쪽 */
justify-content: flex-start; /* 블록을 주축 시작점으로 */
align-items: flex-start; /* 블록을 교차 축 시작점으로 */
}
코드 실행 결과:
예제
이제 교차 축을 따라 블록을 해당 축의 끝점으로 밀어보겠습니다:
.parent {
display: flex;
flex-direction: column; /* 주축 아래, 교차 축 오른쪽 */
justify-content: flex-start; /* 블록을 주축 시작점으로 */
align-items: flex-end; /* 블록을 교차 축 끝점으로 */
}
코드 실행 결과:
예제
두 축 모두에 대해 블록을 해당 축의 끝점으로 밀어보겠습니다:
.parent {
display: flex;
flex-direction: column; /* 주축 아래, 교차 축 오른쪽 */
justify-content: flex-end; /* 블록을 주축 끝점으로 */
align-items: flex-end; /* 블록을 교차 축 끝점으로 */
}
코드 실행 결과:
예제
주축의 방향을 변경해 보겠습니다. - 아래에서 위로 설정하겠습니다. 이때 교차 축은 방향이 바뀌지 않습니다. 주축이 여전히 수직이기 때문입니다.
두 축 모두에 대해 블록을 해당 축의 시작점으로 밀어보겠습니다:
.parent {
display: flex;
flex-direction: column-reverse; /* 주축 위, 교차 축 오른쪽 */
justify-content: flex-start; /* 블록을 주축 시작점으로 */
align-items: flex-start; /* 블록을 교차 축 시작점으로 */
}
코드 실행 결과:
