CSS / Reference / align-content

align-content는 flex의 여러 줄, grid의 트랙 또는 지원되는 블록 레이아웃에서 남는 공간을 내용 주위와 사이에 배분합니다. 개별 아이템을 정렬하는 align-items와 다르며, flex-wrap: nowrap인 flex 컨테이너에는 효과가 없습니다.

문법과 주요 값

초기값은 브라우저 기본 스타일시트가 HTML 요소에 적용한 값과 같다는 뜻이 아닙니다. 실제 값은 개발자 도구의 Computed에서 확인하세요.

.grid { display: grid; grid-template-columns: repeat(2, 80px); grid-auto-rows: 40px; height: 220px; align-content: space-between; }

값과 적용 조건은 MDN align-content에서 확인할 수 있습니다.

실행 예제와 결과 비교

아래 전체 코드를 UTF-8 형식의 align-content-example.html 파일로 저장한 뒤 브라우저로 여세요. 예제용 CSS는 이 파일 안에만 넣고 사이트 전체 스타일시트에 그대로 붙여 넣지 않습니다.

<!doctype html>
<html lang="ko">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>align-content 비교 예제</title>
<style>
body { margin: 0; color: #20242b; background: #fff; font: 16px/1.7 "Malgun Gothic", sans-serif; }
#demo { padding: 24px; max-width: 820px; margin: auto; }
h1 { font-size: 22px; margin: 0 0 20px; }
.samples { display: flex; flex-wrap: wrap; gap: 24px; }
.label { margin: 0 0 8px; font-weight: 700; }
.target, .reference { display: grid; grid-template-columns: repeat(2, 80px); grid-auto-rows: 40px; gap: 8px; width: 180px; height: 220px; border: 1px solid #718096; }
.target { align-content: space-between; }
.reference { align-content: center; }
.item { background: #bfe3ff; text-align: center; }
</style>
</head>
<body>
<main id="demo">
<h1>align-content 적용 비교</h1>
<section class="samples"><div class="a"><p class="label">space-between</p><div class="target"><div class="item">1</div><div class="item">2</div><div class="item">3</div><div class="item">4</div></div></div><div class="b"><p class="label">center</p><div class="reference"><div class="item">1</div><div class="item">2</div><div class="item">3</div><div class="item">4</div></div></div></section>
</main>
</body>
</html>

첫 grid는 두 행이 위아래에 배치되고 그 사이 공간이 늘어납니다. 두 번째는 행 묶음이 중앙에 모입니다. 지정한 gap은 기본 간격이고 분배된 추가 공간과 구분합니다.

flex의 줄과 교차축

flex에서는 교차축 방향의 줄 배치를 다루며 flex-direction에 따라 그 축이 바뀝니다. flex-wrap: wrap인 컨테이너에는 줄 배치 규칙이 적용될 수 있지만 nowrap 컨테이너에서는 align-content로 정렬되지 않습니다. 아이템 하나의 줄 안 위치는 align-items나 align-self로 다룹니다.

남는 공간과 확장 조건

컨테이너 크기가 내용과 같으면 배분할 공간이 없어 값 차이가 작습니다. grid의 stretch는 auto 크기 트랙처럼 늘릴 수 있는 대상에 작동하며 고정 40px 행을 자동으로 늘리는 것은 아닙니다. 현재 문법은 블록 레이아웃도 다루지만 실제 대상 브라우저와 레이아웃의 지원 조건을 확인하세요.

Flex 줄·Grid 트랙·블록을 따로 비교

다음 전체 문서를 css-reference-12377-practice.html로 UTF-8 저장한 뒤 브라우저에서 엽니다. 다른 예제 파일에 중첩해서 붙이지 않고 별도 파일로 시험합니다.

<!doctype html>
<html lang="ko">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Flex 줄·Grid 트랙·블록을 따로 비교</title>
  <style>
    body { margin: 16px; color: #20242b; font: 16px/1.7 sans-serif; }
    main { max-width: 52rem; margin: auto; }
    h1 { font-size: 1.35rem; }
    .samples { display: flex; flex-wrap: wrap; gap: 24px; }
    .samples > * { max-width: 100%; min-width: 0; }
    :focus-visible { outline: 3px solid #005fcc; outline-offset: 3px; }
.container { width:180px;height:200px;border:2px solid #718096;background:#e6f2ff;margin-bottom:20px;gap:8px;align-content:center;overflow-x:auto; } .container > div {background:#ffd166;} .flex {display:flex;align-items:flex-start;} .flex > div {flex:0 0 80px;height:40px;} .wrap {flex-wrap:wrap;} .grid {display:grid;grid-template-columns:1fr 1fr;grid-template-rows:40px 40px;} .stretch {align-content:stretch;grid-template-rows:auto auto;} .block {align-content:center;}
  </style>
</head>
<body>
<main>
  <h1>Flex 줄·Grid 트랙·블록을 따로 비교</h1>
<p>Flex nowrap</p><div class="container flex"><div>A</div><div>B</div><div>C</div><div>D</div></div><p>Flex wrap</p><div class="container flex wrap"><div>A</div><div>B</div><div>C</div><div>D</div></div><p>Grid: 40px tracks / center</p><div class="container grid"><div>A</div><div>B</div><div>C</div><div>D</div></div><p>Grid: auto tracks / stretch</p><div class="container grid stretch"><div>A</div><div>B</div><div>C</div><div>D</div></div><p>일반 블록 / center</p><div class="container block"><p>블록 안의 문장</p></div>
</main>
</body>
</html>

nowrap Flex에서는 align-content가 줄 묶음을 배치하지 않고, wrap에서는 교차축의 남은 공간을 배분합니다. wrap 컨테이너는 실제 줄이 하나일 때도 nowrap과 같은 조건으로 단정하지 않습니다. Grid의 고정 40px 트랙은 center로 모이고 auto 트랙만 stretch에 늘어날 수 있습니다. 일반 블록의 center 지원은 대상 브라우저에서 확인하세요. 각 컨테이너의 align-content만 start로 바꾸어 비교하고 원래 값으로 복구합니다.

Grid 트랙과 auto 크기의 배치 기준은 Grid로 행과 열 만들기에서 확인할 수 있습니다.

align-items는 각 항목이 자신의 줄·셀 안에서 정렬되는 기본값이고 align-self는 특정 항목의 재정의입니다. 위 Flex wrap에서 align-content는 center로 둔 채 align-items만 center로 바꾸어 항목 위치를 비교한 뒤 flex-start로 복구합니다. 고정 높이 40px 항목을 둔 이 예제에서 줄 높이와 항목 높이가 같으면 변화가 안 보일 수 있으므로 둘째 항목만 20px로 만든 뒤 같은 실험을 하고 두 값을 복구하세요.

실제 Flex 항목 배치에서 축과 남은 공간을 비교하려면 Flexbox 정렬·간격·줄바꿈·크기 조절하기를 참고하세요.

적용되지 않거나 예상과 다를 때

• flex에서 안 되면 flex-wrap과 교차축 크기를 확인합니다.
• 아이템 위치를 바꾸려는 것인지 줄·트랙 묶음을 배치하려는 것인지 구분합니다.