align-content 속성

속성 align-content는 플렉스(flex) 블록의 경우 교차 축을 따라, 그리드의 경우 수직 축을 따라 요소들의 정렬을 지정합니다. 부모 요소에 적용됩니다.

구문

css선택자 {
  align-content: flex-start | flex-end | center | space-between | space-around;
}

값

예제 . flex-start 값

이 예제에서 정렬이 이루어지는 축은 위에서 아래 방향, 즉 교차 축입니다. 결과에서 볼 수 있듯이, 우리의 모든 요소들이 그 상단 부분에 붙어 있습니다:

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

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

Результат:

예제 . flex-end 값

이 예제에서 블록들은 교차 축의 아래쪽에 붙어 있습니다. 속성 align-content가 값 flex-end로 설정되었기 때문입니다:

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

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

Результат:

예제 . center 값

이제 블록들이 교차 축의 중앙에 정렬되었습니다:

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

css#parent {
  display: flex;
  align-content: 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: grid;
  align-content: 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;
  align-content: center;
  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;
  align-content: 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;
}

Результат:

함께 보기