place-content 속성

place-content 속성은 플렉스 요소의 경우 주축과 교차축을 따라, 그리고 그리드의 경우 수평축과 수직축을 따라 요소를 정렬합니다. 첫 번째 값은 주축(수평축)을 따른 정렬을, 두 번째 값은 교차축(수직축)을 따른 정렬을 지정합니다. 이 속성은 부모 요소에 적용됩니다.

구문

선택자 {
	place-content: 주축 교차축;
}

예제 . 주축 시작점과 교차축 중앙 정렬

현재 요소들은 주축의 상단 부분에 맞춰져 있으며 동시에 교차축의 중앙에 위치합니다:

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

#parent {
	display: flex;
	place-content: start center;
	flex-wrap: wrap;
	height: 200px;
	border: 1px solid #696989;
}
#parent > div {
	width: 100px;
	height: 50px;
	border: 1px solid #696989;
}

예제 . 주축 중앙과 교차축 끝점 정렬

이제 요소들은 주축의 중앙에 위치하며 교차축의 끝점에 있습니다:

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

#parent {
	display: flex;
	place-content: center end;
	flex-wrap: wrap;
	height: 200px;
	border: 1px solid #696989;
}
#parent > div {
	width: 100px;
	height: 50px;
	border: 1px solid #696989;
}

예제 . 주축 끝점과 교차축 시작점 정렬

여기서 요소들은 주축의 하단 부분에 맞춰져 있으며 동시에 교차축의 시작점에 맞춰져 있습니다:

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

#parent {
	display: flex;
	place-content: end start;
	flex-wrap: wrap;
	height: 200px;
	border: 1px solid #696989;
}
#parent > div {
	width: 100px;
	height: 50px;
	border: 1px solid #696989;
}

예제 . 그리드에서 수직축 시작점과 수평축 끝점 정렬

요소들을 수직축 시작점과 수평축 끝점을 따라 정렬해 보겠습니다:

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

#parent {
	display: grid;
	place-content: start end;
	grid-template-columns: 100px 100px;
	gap: 10px;
	padding: 10px;
	border: 2px solid #696989;
	height: 200px;
	width: 400px;
}
#parent > div {
	gap: 10px;
	padding: 10px;
	box-sizing: border-box;
	border: 1px solid #696989;
}

예제 . 그리드에서 수직축 중앙과 수평축 시작점 정렬

요소들을 수직축 중앙과 수평축 시작점을 따라 정렬해 보겠습니다:

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

#parent {
	display: grid;
	place-content: center start;
	grid-template-columns: 100px 100px;
	gap: 10px;
	padding: 10px;
	border: 2px solid #696989;
	height: 200px;
	width: 400px;
}
#parent > div {
	gap: 10px;
	padding: 10px;
	box-sizing: border-box;
	border: 1px solid #696989;
}

예제 . 그리드에서 수직축 끝점과 수평축 시작점 정렬

요소들을 수직축 끝점과 수평축 시작점을 따라 정렬해 보겠습니다:

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

#parent {
	display: grid;
	place-content: end start;
	grid-template-columns: 100px 100px;
	gap: 10px;
	padding: 10px;
	border: 2px solid #696989;
	height: 200px;
	width: 400px;
}
#parent > div {
	gap: 10px;
	padding: 10px;
	box-sizing: border-box;
	border: 1px solid #696989;
}

참고 항목

align-content 속성,
교차축 또는 수직축을 따른 정렬을 지정합니다
justify-content 속성,
주축을 따른 정렬을 지정합니다