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 / background-size

background-size는 배경 이미지의 가로 크기와 세로 크기를 정하는 속성입니다. 기본값 : auto 상속 : No 애니메이션 : Yes 버전 : CSS Level 3

CSS / Reference / text-align

text-align은 문단 정렬 방식을 정하는 속성입니다. 기본값 : 읽는 방향이 LTR(왼쪽에서 오른쪽)인 경우 left, RTL(오른쪽에서 왼쪽)인 경우 right 상속 : Yes 애니메이션 : No 버전 : CSS Level 1

CSS / Reference / text-decoration

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

CSS / Reference / white-space

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

CSS / Reference / overflow

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

CSS / Reference / accent-color

accent-color는 HTML의 폼 요소에 사용되는 강조 색상을 정하는 속성입니다. 기본적으로 브라우저는 사용자 인터페이스 요소에 특정한 시스템 색상을 사용하지만, accent-color를 사용하면 이러한 요소들의 강조 색상을 커스터마이즈할 수 있습니다.

CSS / Reference / border-style

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

CSS / Reference / background-attachment

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

CSS / Reference / text-shadow

text-shadow는 글자에 그림자 효과를 주는 속성입니다. 기본값 : none 상속 : Yes 애니메이션 : Yes 버전 : CSS Level 3 박스에 그림자 효과를 주고 싶다면 box-shadow 속성을 사용합니다.

CSS / Reference / aspect-ratio

aspect-ratio는 선택한 요소의 가로 세로 비율을 정하는 속성입니다. 접속하는 기기의 해상도가 변해도, 일정한 가로 세로 비율을 유지하고 싶을 때 유용하게 사용할 수 있습니다.