flex-direction
플렉스 컨테이너를 지정했다면 플렉스 항목을 배열할 방향을 알려주어야 합니다. flex-direction 속성을 사용해 플렉스 항목의 주축을 가로(row)로 할지, 세로(column)로 할지 지정합니다.
기본형
flex-direction : row | row-reverse | column | column-reverse
- row : 왼쪽에서 오른쪽으로 배열합니다.
- row-reverse : 오른쪽에서 왼쪽으로 배열합니다.
- column : 위쪽에서 아래쪽으로 배열합니다.
- column-reverse : 아래쪽에서 위쪽으로 배열합니다.
flex-direction: row
기본 값은 row로, 왼쪽에서 오른쪽으로 배열합니다.
<div class="container">
<div class="item">Item 1</div>
<div class="item">Item 2</div>
<div class="item">Item 3</div>
<div class="item">Item 4</div>
</div>
.container {
height: 300px;
padding: 8px;
background-color: #1e1e1e;
display: flex;
flex-direction: row;
}
.item {
margin: 8px;
padding: 16px;
background-color: #b5cea8;
}
flex-direction: row-reverse
flex-direction 속성 값을 row-reverse로 하면, 오른쪽에서 왼쪽으로 배열합니다.
.container {
height: 300px;
padding: 8px;
background-color: #1e1e1e;
display: flex;
flex-direction: row-reverse;
}
flex-direction: column
flex-direction의 값을 column 으로 하면, 위에서 아래로 배열합니다.
.container {
height: 400px;
padding: 8px;
background-color: #1e1e1e;
display: flex;
flex-direction: column;
}
flex-direction: column-reverse
flex-direction의 값을 column-reverse으로 하면, 아래에서 위로 배열합니다.
.container {
height: 400px;
padding: 8px;
background-color: #1e1e1e;
display: flex;
flex-direction: column-reverse;
}