- flex-direction으로 Item의 배열 방향을 정합니다.
- 기본값은 row로, 왼쪽에서 오른쪽으로 배열합니다.
<!doctype html>
<html lang="ko">
<head>
<meta charset="utf-8">
<title>CSS</title>
<style>
.jb-container {
height: 400px;
padding: 10px;
background-color: #01579b;
display: flex;
flex-direction: row;
}
.jb-item {
margin: 10px;
padding: 20px;
background-color: #29b6f6;
}
</style>
</head>
<body>
<div class="jb-container">
<div class="jb-item">Item 1</div>
<div class="jb-item">Item 2</div>
<div class="jb-item">Item 3</div>
<div class="jb-item">Item 4</div>
</div>
</body>
</html>

- flex-direction의 값을 row-reverse로 하면, 오른쪽에서 왼쪽으로 배열합니다.
.jb-container {
height: 400px;
padding: 10px;
background-color: #01579b;
display: flex;
flex-direction: row-reverse;
}

- flex-direction의 값을 column으로 하면, 위에서 아래로 배열합니다.
.jb-container {
height: 400px;
padding: 10px;
background-color: #01579b;
display: flex;
flex-direction: column;
}

- flex-direction의 값을 column-reverse으로 하면, 아래에서 위로 배열합니다.
.jb-container {
height: 400px;
padding: 10px;
background-color: #01579b;
display: flex;
flex-direction: column-reverse;
}
