align-content

1 개요
2 문법
3 예제 - stretch
4 예제 - flex-start
5 예제 - center
6 예제 - flex-end
7 예제 - space-between
8 예제 - space-around
9 예제 - space-evenly

개요

flex-wrap 속성의 값이 wrap인 경우, 아이템들의 가로폭의 합이 콘테이너의 가로폭을 넘어가면 아이템이 다음 줄로 내려갑니다. 이때 여러 줄이 되어버린 아이템들의 정렬을 어떻게 할지 정하는 속성이 align-content입니다.

문법

align-content: stretch | center | flex-start | flex-end | space-between | space-around | space-evenly | initial | inherit

stretch : 기본값으로, 높이를 꽉 채웁니다.
flex-start : 위쪽부터 채웁니다.
center : 가운데에 배치합니다.
flex-end : 아래쪽부터 채웁니다.
space-between : 세로 간격을 동일하게 만듭니다.
space-around : 아이템의 위 아래 간격을 동일하게 만듭니다.
space-evenly : 맨 위와 맨 아래의 간격을 포함하여 세로 간격을 동일하게 만듭니다.
initial : 기본값으로 설정합니다.
inherit : 부모 요소의 속성값을 상속 받습니다.

예제 - stretch

기본값은 stretch로, 높이를 꽉 채웁니다.

<!doctype html>
<html lang="ko">
  <head>
    <meta charset="utf-8">
    <title>CSS</title>
    <style>
      body {
        box-sizing: border-box;
        margin: 0px;
        font-family: Consolas, monospace;
      }
      .jb-container {
        height: 100vh;
        background-color: #01579b;
        display: flex;
        flex-wrap: wrap;
        align-content: stretch;
      }
      .jb-item {
        width: 100%;
        padding: 10px;
      }
      .jb-item:nth-child(1) {
        background-color: #e3f2fd;
      }
      .jb-item:nth-child(2) {
        background-color: #bbdefb;
        font-size: 2em;
      }
      .jb-item:nth-child(3) {
        background-color: #90caf9;
        font-size: 3em;
      }
    </style>
  </head>
  <body>
    <div class="jb-container">
      <div class="jb-item">Item 1</div>
      <div class="jb-item">Item 2</div>
      <div class="jb-item">Item 3</div>
    </div>
  </body>
</html>

예제 - flex-start

align-content의 값을 flex-start로 정하면 위쪽부터 채웁니다.

.jb-container {
  height: 100vh;
  background-color: #01579b;
  display: flex;
  flex-wrap: wrap;
  align-content: flex-start;
}

예제 - center

align-content의 값을 center로 정하면 가운데에 배치합니다.

.jb-container {
  height: 100vh;
  background-color: #01579b;
  display: flex;
  flex-wrap: wrap;
  align-content: center;
}

예제 - flex-end

align-content의 값을 flex-end로 정하면 아래쪽부터 채웁니다.

.jb-container {
  height: 100vh;
  background-color: #01579b;
  display: flex;
  flex-wrap: wrap;
  align-content: flex-end;
}

예제 - space-between

align-content의 값을 space-between로 정하면 세로 간격을 동일하게 만듭니다.

.jb-container {
  height: 100vh;
  background-color: #01579b;
  display: flex;
  flex-wrap: wrap;
  align-content: space-between;
}

예제 - space-around

align-content의 값을 space-around로 정하면, 아이템의 위 아래 간격을 동일하게 만듭니다.

.jb-container {
  height: 100vh;
  background-color: #01579b;
  display: flex;
  flex-wrap: wrap;
  align-content: space-around;
}

예제 - space-evenly

align-content의 값을 space-evenly로 정하면, 맨 위와 맨 아래의 간격을 포함하여 세로 간격을 동일하게 만듭니다.

.jb-container {
  height: 100vh;
  background-color: #01579b;
  display: flex;
  flex-wrap: wrap;
  align-content: space-evenly;
}

CSS / Reference / box-sizing

box-sizing은 박스의 크기를 어떤 것을 기준으로 계산할지를 정하는 속성입니다. 기본값 : content-box 상속 : No 애니메이션 : No 버전 : CSS Level 3

CSS / Reference / text-decoration

text-decoration은 선으로 텍스트를 꾸밀 수 있게 해주는 속성입니다. 기본값 : none 상속 : No 애니메이션 : No 버전 : CSS Level 1

CSS / Reference / line-height

line-height 속성은 텍스트 줄 간격(줄 높이)을 조절하는 데 사용됩니다. 텍스트의 가독성을 높이고, 디자인적으로 더 일관된 레이아웃을 만들기 위해 자주 사용됩니다. 기본값 : normal 상속 : Yes 애니메이션 : Yes 버전 : CSS Level 1

CSS / Reference / background-attachment

background-attachment는 배경 이미지의 스크롤 여부를 정하는 속성입니다. 기본값 : scroll 상속 : No 애니메이션 : No 버전 : CSS Level 1

CSS / Reference / color

color로 텍스트의 색을 정합니다. 상속 : Yes 애니메이션 : Yes 버전 : CSS Level 1

CSS / Reference / white-space

white-space는 스페이스와 탭, 줄바꿈, 자동줄바꿈을 어떻게 처리할지 정하는 속성입니다. 기본값 : normal 상속 : Yes 애니메이션 : No 버전 : CSS Level 1

CSS / Reference / letter-spacing, word-spacing

글자 사이의 간격은 letter-spacing으로, 단어 사이의 간격은 word-spacing으로 정합니다. 값이 커지면 간격이 커집니다. 값에는 음수를 넣을 수 있습니다. 음수를 값으로 하는 경우 글자가 겹칠 수 있습니다.

CSS / Reference / border-style

border-style은 테두리(border)의 모양을 정하는 속성으로, 다음 속성의 단축 속성입니다. border-top-style border-right-style border-bottom-style border-left-style

CSS / Reference / list-style-position

list-style-position으로 ul, ol 등의 목록의 마커(marker)의 위치를 정합니다. 기본값 : outside 상속 : Yes 애니메이션 : No 버전 : CSS Level 1

CSS / Reference / font-style

font-style은 글자 모양을 정하는 속성으로, 기울임 여부를 정합니다. 기본값 : normal 상속 : Yes 애니메이션 : No 버전 : CSS Level 1