flex-direction 속성

flex-direction 속성은 주축과 교차축의 방향을 설정하거나, 다른 말로 하면 요소들을 행 또는 열로 배치합니다.

플렉스 블록의 부모 요소에 적용됩니다. 축약 속성 flex-flow에 포함됩니다.

문법

선택자 {
	flex-direction: row | row-reverse | column | column-reverse;
}

값	설명
`row`	주축은 왼쪽에서 오른쪽으로 향합니다. 요소들은 행으로 배치되며, 기본적으로 왼쪽 가장자리에 붙고, 번호 매기기는 일반적인 순서 - 왼쪽에서 오른쪽을 가집니다.
`row-reverse`	주축은 오른쪽에서 왼쪽으로 향합니다. 요소들은 행으로 배치되며, 기본적으로 오른쪽 가장자리에 붙고, 번호 매기기는 역순 - 오른쪽에서 왼쪽을 가집니다.
`column`	주축은 위에서 아래로 향합니다. 요소들은 열로 배치되며, 기본적으로 상단에 붙고, 번호 매기기는 일반적인 순서 - 위에서 아래를 가집니다.
`column-reverse`	주축은 아래에서 위로 향합니다. 요소들은 열로 배치되며, 기본적으로 하단에 붙고, 번호 매기기는 역순 - 아래에서 위를 가집니다.

기본값: row.

요소들은 행으로 배치되며, 기본적으로 왼쪽 가장자리에 붙고, 번호 매기기는 일반적인 순서 - 왼쪽에서 오른쪽입니다:

<div id="parent">
	<div>1</div>
	<div>2</div>
	<div>3</div>
	<div>4</div>
	<div>5</div>
</div>

#parent {
	flex-direction: row;
	display: flex;
}
#parent > div {
	border: 1px solid #696989;
	width: 100px;
	height: 50px;
}

요소들은 행으로 배치되며, 기본적으로 오른쪽 가장자리에 붙고, 번호 매기기는 역순 - 오른쪽에서 왼쪽입니다:

<div id="parent">
	<div>1</div>
	<div>2</div>
	<div>3</div>
	<div>4</div>
	<div>5</div>
</div>

#parent {
	flex-direction: row-reverse;
	display: flex;
}
#parent > div {
	border: 1px solid #696989;
	width: 100px;
	height: 50px;
}

요소들은 열로 배치되며, 기본적으로 상단에 붙고, 번호 매기기는 일반적인 순서 - 위에서 아래입니다:

<div id="parent">
	<div>1</div>
	<div>2</div>
	<div>3</div>
	<div>4</div>
	<div>5</div>
</div>

#parent {
	flex-direction: column;
	display: flex;
}
#parent > div {
	border: 1px solid #696989;
	width: 100px;
	height: 50px;
}

요소들은 열로 배치되며, 기본적으로 하단에 붙고, 번호 매기기는 역순 - 아래에서 위입니다:

<div id="parent">
	<div>1</div>
	<div>2</div>
	<div>3</div>
	<div>4</div>
	<div>5</div>
</div>

#parent {
	flex-direction: column-reverse;
	display: flex;
}
#parent > div {
	border: 1px solid #696989;
	width: 100px;
	height: 50px;
}