제이코딩

Chapter 02. 플렉스박스

2-2. 플렉스 콘테이너

Flex Container는 Flexbox 레이아웃의 기준이 되는 부모 요소입니다.
CSS에서 display: flex 또는 display: inline-flex 속성을 가진 요소를 말합니다.

■ Flex Container의 CSS 속성

속성	설명
display: flex	Flex 컨테이너로 지정
flex-direction	아이템의 배치 방향 설정 (가로: row, 세로: column)
justify-content	가로 방향 정렬 (좌우 정렬)
align-items	세로 방향 정렬 (상하 정렬)
flex-wrap	아이템이 넘칠 때 줄바꿈 여부 결정 (wrap, nowrap)

■ flex-direction 속성

이 flex-direction속성은 Flex 컨테이너 내 Flex 항목의 표시 방향을 지정합니다.
해당 flex-direction속성은 다음 값 중 하나를 가질 수 있습니다.

row
column
row-reverse
column-reverse

flex-direction 속성

ex2-2.html

<!DOCTYPE html>
<html lang="ko">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Flexbox 예제</title>
<style>
.container {
  display: flex;
  flex-direction: row;
  background-color: green;
}
.container > div {
  background-color: lightgray;
  width: 100px;
  margin: 10px;
  text-align: center;
  line-height: 75px;
  font-size: 30px;
}
</style>
</head>
<body>
<h1>flex-direction 속성</h1>
<div class="container">
  <div>1</div>
  <div>2</div>
  <div>3</div>
</div>
</body>
</html>

ex2-2.html의 실행 결과

■ flex-wrap 속성

이 flex-wrap속성은 한 줄의 플렉스 항목에 충분한 공간이 없을 경우 플렉스 항목을 줄바꿈할지 여부를 지정합니다.

해당 flex-wrap속성은 다음 값 중 하나를 가질 수 있습니다.

nowrap
wrap
wrap-reverse

flex-wrap 속성

ex2-3.html

<!DOCTYPE html>
<html lang="ko">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Flexbox 예제</title>
<style>
.container {
  display: flex;
  flex-wrap: nowrap;
  background-color: pink;
}

.container>div {
  background-color: white;
  width: 100px;
  margin: 10px;
  text-align: center;
  line-height: 75px;
  font-size: 30px;
}
</style>
</head>
<body>
<h1>flex-wrap 속성</h1>
<div class="container">
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
  <div>5</div>
  <div>6</div>
  <div>7</div>
  <div>8</div>
  <div>9</div>
  <div>10</div>
  <div>11</div>
  <div>12</div>
</div>
</body>
</html>

ex2-3.html의 실행 결과

■ justify-content 속성

이 justify-content속성은 플렉스 항목이 주축(수평)에서 사용 가능한 모든 공간을 사용하지 않을 때 해당 항목을 정렬하는 데 사용됩니다.
해당 justify-content속성은 다음 값 중 하나를 가질 수 있습니다.

center
flex-start
flex-end
space-around
space-between
space-evenly

justify-content 속성

ex2-4.html

<!DOCTYPE html>
<html lang="ko">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Flexbox 예제</title>
<style>
.container {
  display: flex;
  justify-content: center;
  background-color: skyblue;
}

.container > div {
  background-color: white;
  width: 100px;
  margin: 10px;
  text-align: center;
  line-height: 75px;
  font-size: 30px;
}
</style>
</head>
<body>
<h1>justify-content 속성</h1>
<div class="container">
  <div>1</div>
  <div>2</div>
  <div>3</div>
</div>
</body>
</html>

ex2-4.html의 실행 결과

■ align-items 속성

이 align-items속성은 플렉스 항목이 교차축(수직)에서 사용 가능한 모든 공간을 사용하지 않을 때 해당 항목을 정렬하는 데 사용됩니다.

해당 align-items속성은 다음 값 중 하나를 가질 수 있습니다.

center
flex-start
flex-end
stretch
baseline
normal

align-items 속성

ex2-5.html

<!DOCTYPE html>
<html lang="ko">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Flexbox 예제</title>
<style>
.container {
  display: flex;
  height: 200px;
  align-items: center;
  background-color: DodgerBlue;
}
.container > div {
  background-color: #f1f1f1;
  width: 100px;
  margin: 10px;
  text-align: center;
  line-height: 75px;
  font-size: 30px;
}
</style>
</head>
<body>
<h1>align-items 속성</h1>
<div class="container">
  <div>1</div>
  <div>2</div>
  <div>3</div>
</div>
</body>
</html>

ex2-5.html의 실행 결과

■ align-content 속성

해당 align-content속성은 플렉스 라인을 정렬하는 데 사용됩니다.
이 align-content속성은 와 유사 align-items하지만, 플렉스 항목을 정렬하는 대신 플렉스 라인을 정렬합니다.

해당 align-content속성은 다음 값 중 하나를 가질 수 있습니다.

center
stretch
flex-start
flex-end
space-around
space-between
space-evenly

align-content 속성

ex2-6.html

<!DOCTYPE html>
<html lang="ko">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Flexbox 예제</title>
<style>
.container {
  display: flex;
  height: 600px;
  flex-wrap: wrap;
  align-content: center;
  overflow: scroll;
  background-color: orange;
}
.container > div {
  background-color: white;
  width: 100px;
  margin: 10px;
  text-align: center;
  line-height: 75px;
  font-size: 30px;
}
</style>
</head>
<body>
<h1>align-content 속성</h1>
<div class="container">
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
  <div>5</div>
  <div>6</div>
  <div>7</div>
  <div>8</div>
  <div>9</div>
  <div>10</div>
  <div>11</div>
  <div>12</div>
</div>
</body>
</html>