● flex-direction 속성
flex-direction 속성은 플렉스 박스 레이아웃의 주축 방향을 결정합니다.
형식
flex-direction:<속성값>;
사용하는 속성값은 다음과 같습니다.
표 7-1 flex-direction 속성값
|
속성값 |
설명 |
|
row |
주축 방향을 왼쪽에서 오른쪽으로 지정합니다. |
|
row-reverse |
주축 방향을 오른쪽에서 왼쪽으로 지정합니다. |
|
column |
주축 방향을 위쪽에서 아래쪽으로 지정합니다. |
|
column-reverse |
주축 방향을 아래쪽에서 위쪽으로 지정합니다. |
플렉스 박스 레이아웃은 기본으로 flex-direction 속성값이 row로 적용됩니다. 주축을 변경하고 싶으면 flex-direction 속성값을 다른 값으로 지정하면 됩니다.
07/01/flex-direction.html
.flex-container{
display:flex;
flex-direction:row; /* row-reverse, column, column-reverse */
}