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 / overflow

overflow는 내용이 요소의 크기를 벗어났을 때 어떻게 처리할지를 정하는 속성입니다. 기본값 : visible 상속 : No 애니메이션 : No 버전 : CSS Level 2

CSS / Reference / border-collapse

border-collapse는 표(table)의 테두리와 셀(td)의 테두리 사이의 간격을 어떻게 처리할지 정하는 속성입니다. 기본값 : separate 상속 : Yes 애니메이션 : No 버전 : CSS Level 2

CSS / Reference / font-style

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

CSS / Reference / text-decoration

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

CSS / Reference / list-style-position

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

CSS / Reference / background-origin

HTML 요소는 박스로 이루어져 있고, 바깥 여백 영역(Margin Area), 테두리 영역(Border Area), 안쪽 여백 영역(Padding Area), 내용 영역(Content Area)으로 구분합니다. background-origin으로 배경 이미지를 어느 영역부터 채워나갈지를 정합니다. 기본값 : padding-box 상속 : No 애니메이션 : No 버전 : CSS Level 3

CSS / Reference / font-size

font-size는 글자 크기를 정하는 속성입니다. 기본값 : medium 상속 : Yes 애니메이션 : Yes 버전 : CSS Level 1

CSS / Reference / box-shadow

box-shadow는 선택한 요소에 그림자 효과를 만들어주는 속성입니다. 기본값 : none 상속 : No 애니메이션 : Yes 버전 : CSS Level 3 글자에 그림자 효과를 주고 싶다면 text-shadow 속성을 사용합니다.

CSS / Reference / tab-size

HTML은 탭을 연속하여 여러 개 넣어도 하나의 공백으로 인식합니다. 하지만 pre 태그를 이용하면 입력된 그대로 출력할 수 있습니다. 기본적으로 하나의 탭을 8개의 공백으로 인식합니다. 이 탭 크기를 조정하는 속성이 tab-size입니다.

CSS / Reference / empty-cells

empty-cells은 표(table)에서 빈 셀의 테두리를 표시할지 말지는 정하는 속성입니다. 기본값 : show 상속 : Yes 애니메이션 : No 버전 : CSS Level 2