flex 컨테이너를 정의합니다. (주어진 값에 따라 inline 또는 block)
모든 직계 자식에 대해 flex context를 활성화 합니다.
.container {
display: flex; /* or inline-flex */
}
flex-direction은 주축(main axis)를 설정하며, flex items가 flex container 내에서 배치되는 방향을 정의합니다.
Flexbox는 (선택적으로 레핑을 제외하고) 단일 방향 레이아웃 개념입니다. flex items는 주로 수평 행 또는 수직 열에 놓이도록 배치됩니다.
.container {
flex-direction: row | row-reverse | column | column-reverse;
}
기본적으로 flex items는 모두 한 줄에 맞추려고 합니다.
이 속성을 사용하여 필요에 따라 items를 래핑하도록 허용할 수 있습니다.
.container {
flex-wrap: nowrap | wrap | wrap-reverse;
}