CSS의 flex-direction 속성에 row-reverse 값을 사용하면 플렉스 컨테이너 내부의 항목들을 가로 방향으로, 그리고 오른쪽에서 왼쪽 순서로 배치할 수 있습니다.
일반적인 row 값은 항목을 왼쪽에서 오른쪽으로 나열하지만, row-reverse는 이 배치 방향을 반대로 뒤집어 주기 때문에 RTL(오른쪽→왼쪽) 형태의 레이아웃을 간단하게 구현할 때 유용합니다.
주요 코드 설명
- display: flex; — 해당 요소를 플렉스 컨테이너로 지정합니다.
- flex-direction: row-reverse; — 자식 항목(플렉스 아이템)의 주 축(main axis) 방향을 오른쪽에서 왼쪽으로 설정합니다.
예제 코드
아래 예제를 실행하면 Q1부터 Q6까지의 항목이 화면 오른쪽에서 왼쪽 방향으로 배치되는 것을 확인할 수 있습니다.
<!DOCTYPE html>
<html>
<head>
<style>
.mycontainer {
display: flex;
flex-direction: row-reverse;
background-color: orange;
}
.mycontainer > div {
background-color: white;
text-align: center;
line-height: 40px;
font-size: 25px;
width: 100px;
margin: 5px;
}
</style>
</head>
<body>
<h1>Quiz</h1>
<div class = "mycontainer">
<div>Q1</div>
<div>Q2</div>
<div>Q3</div>
<div>Q4</div>
<div>Q5</div>
<div>Q6</div>
</div>
</body>
</html>실행 결과
위 코드를 브라우저에서 실행하면 주황색 배경의 컨테이너 안에서 Q6 → Q5 → Q4 → Q3 → Q2 → Q1 순서로 항목이 오른쪽부터 왼쪽으로 정렬되어 표시됩니다.
flex-direction의 다른 값들
- row — 기본값으로, 항목을 왼쪽에서 오른쪽으로 가로 배치합니다.
- row-reverse — 항목을 오른쪽에서 왼쪽으로 가로 배치합니다.
- column — 항목을 위에서 아래로 세로 배치합니다.
- column-reverse — 항목을 아래에서 위로 세로 배치합니다.