CSS의 flex-direction 속성은 플렉스 컨테이너 내부 아이템들이 배치되는 방향을 결정하는 핵심 속성입니다. 그중 row-reverse 값을 사용하면 플렉스 아이템들을 가로 방향으로 배치하되, 일반적인 row 값과 반대로 오른쪽에서 왼쪽으로 정렬할 수 있습니다.
row-reverse 값이란?
기본값인 row는 아이템을 왼쪽에서 오른쪽으로 배치하지만, row-reverse는 주축(main axis)의 방향을 뒤집어 첫 번째 아이템이 가장 오른쪽에 위치하게 됩니다. RTL(Right-to-Left) 레이아웃을 구현하거나, 시각적으로 순서를 반전시켜야 하는 UI를 만들 때 유용하게 활용됩니다.
예제 코드
다음 코드를 실행하면 row-reverse 값이 실제로 어떻게 동작하는지 확인할 수 있습니다.
<!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>실행 결과 설명
위 예제에서는 주황색 배경의 플렉스 컨테이너 안에 Q1부터 Q6까지 여섯 개의 흰색 박스가 들어 있습니다. flex-direction: row-reverse;가 적용되었기 때문에 화면에는 Q6, Q5, Q4, Q3, Q2, Q1 순서, 즉 오른쪽에서 왼쪽으로 아이템이 나열됩니다.
참고: flex-direction의 주요 값
- row: 기본값, 아이템을 왼쪽에서 오른쪽으로 가로 배치
- row-reverse: 아이템을 오른쪽에서 왼쪽으로 가로 배치
- column: 아이템을 위에서 아래로 세로 배치
- column-reverse: 아이템을 아래에서 위로 세로 배치
플렉스박스 레이아웃에서 아이템의 시각적 순서를 HTML 구조 변경 없이 손쉽게 뒤집고 싶다면 row-reverse 값을 활용해 보세요.