CSS에서 주축을 따라 플렉스 요소 정렬하기
justify-content 속성을 사용하면
주축을 따라 요소들을 정렬할 수 있습니다. 이전에
center, space-between, space-around,
space-evenly 값들을 이미 배웠습니다. 이제 몇 가지
다른 값들을 더 알아보겠습니다.
flex-start 값은 요소들을 주축의 시작점으로
밀착시키고, flex-end 값은 끝점으로 밀착시킵니다.
예제를 통해 살펴보겠습니다.
예제
flex-direction 속성에 row 값을 지정하여
주축을 왼쪽에서 오른쪽으로 설정하겠습니다.
블록들을 축의 시작점으로 밀착시키겠습니다. 이를 위해
justify-content를 flex-start 값으로 설정합니다:
.parent {
display: flex;
flex-direction: row; /* 주축은 왼쪽에서 오른쪽 */
justify-content: flex-start; /* 블록들을 주축 시작점으로 */
}
코드 실행 결과:
예제
이제 블록들을 축의 끝점으로 밀착시키겠습니다.
이를 위해 justify-content를
flex-end 값으로 설정합니다:
.parent {
display: flex;
flex-direction: row; /* 주축은 왼쪽에서 오른쪽 */
justify-content: flex-end; /* 블록들을 주축 끝점으로 */
}
코드 실행 결과:
예제
이제 주축을 오른쪽에서 왼쪽으로 설정하겠습니다.
flex-direction 속성에
row-reverse 값을 지정합니다. 블록들을 축의 시작점,
즉 오른쪽 가장자리로 밀착시키겠습니다. 이를 위해 justify-content를
flex-start 값으로 설정합니다:
.parent {
display: flex;
flex-direction: row-reverse; /* 주축은 오른쪽에서 왼쪽 */
justify-content: flex-start; /* 블록들을 주축 시작점으로 */
}
코드 실행 결과:
예제
이제 블록들을 주축의 끝점,
즉 왼쪽 가장자리로 밀착시키겠습니다. 이를 위해 justify-content를
flex-end 값으로 설정합니다:
.parent {
display: flex;
flex-direction: row-reverse; /* 주축은 오른쪽에서 왼쪽 */
justify-content: flex-end; /* 블록들을 주축 끝점으로 */
}
코드 실행 결과:
예제
이전 예제들에서는 주축이 수평으로 설정되었습니다. 이제 축을 회전시켜 수직으로 설정하겠습니다.
flex-direction 속성에
column 값을 지정하여 주축을 아래쪽으로 설정하겠습니다.
블록들을 주축의 시작점, 즉
상단 가장자리로 밀착시키겠습니다. 이를 위해 justify-content를
flex-start 값으로 설정합니다:
.parent {
display: flex;
flex-direction: column; /* 주축은 위에서 아래로 */
justify-content: flex-start; /* 블록들을 주축 시작점으로 */
}
코드 실행 결과:
예제
이제 블록들을 주축의 끝점,
즉 하단 가장자리로 밀착시키겠습니다. 이를 위해 justify-content를
flex-end 값으로 설정합니다:
.parent {
display: flex;
flex-direction: column; /* 주축은 위에서 아래로 */
justify-content: flex-end; /* 블록들을 주축 끝점으로 */
}
코드 실행 결과:
예제
주축을 뒤집어 아래에서
위로 설정하겠습니다. 이를 위해 flex-direction
속성에 column-reverse 값을 지정합니다.
이 경우 블록들의 순서가 바뀌게 됩니다.
축의 시작점에는 HTML 코드상 마지막에 있는
블록이 위치하게 됩니다.
블록들을 주축의 시작점,
즉 하단 가장자리로 밀착시키겠습니다. 이를 위해 justify-content를
flex-start 값으로 설정합니다:
.parent {
display: flex;
flex-direction: column-reverse; /* 주축은 아래에서 위로 */
justify-content: flex-start; /* 블록들을 주축 시작점으로 */
}
코드 실행 결과:
예제
블록들을 주축의 끝점,
즉 상단 가장자리로 밀착시키겠습니다. 이를 위해 justify-content를
flex-end 값으로 설정합니다:
.parent {
display: flex;
flex-direction: column-reverse; /* 주축은 아래에서 위로 */
justify-content: flex-end; /* 블록들을 주축 끝점으로 */
}
코드 실행 결과:
