place-content 속성

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

구문

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

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

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

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

css#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;
}

Результат:

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

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

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

css#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;
}

Результат:

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

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

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

css#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;
}

Результат:

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

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

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

css#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;
}

Результат:

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

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

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

css#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;
}

Результат:

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

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

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

css#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;
}

Результат:

참고 항목