CSS Flex Container

description : CSS Flex Container
author : 오션
email : shlim@repia.com
lastupdate : 2021-07-05

=====The source of this article=====CSS Flex Container

Parent Element (Container)

이전 챕터에서 지정했던 것처럼, 아래는 3개의 플렉스 아이템을 가진 플렉스 컨테이너(blue 컬러 부분)입니다.

display속성을 flex로 설정하면 플렉스 컨테이너는 유연해집니다.

Example

<!DOCTYPE html>
<html lang="en">
 
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Flex Container</title>
    <style>
        .flex-container {
            /* parent element */
            background-color: dodgerblue;
            display: flex;
        }
        .flex-container>div {
            /* direct child elements of the flexible container = flexible items */
            background-color: #f1f1f1;
            margin: 10px;
            padding: 20px;
            font-size: 30px;
        }
    </style>
</head>
<body>
    <!-- .flex-container>div*3 -->
    <div class="flex-container">
        <div>1</div>
        <div>2</div>
        <div>3</div>
    </div>
    <p>A Flexible Layout must have a parent element with the <em>display</em> 
    property set to <em>flex</em>.</p>
    <p>Direct child element(s) of the flexible container automatically becomes
    flexible items.</p>
</body>
</html>

플렉스 컨테이너 속성은 하기와 같습니다:

flex-direction
flex-wrap
flex-flow
justify-content
align-items
align-content

The flex-direction Property

flex-direction속성은 컨테이너가 플렉스 아이템을 쌓을 방향을 정의합니다.

Example

column값은 수직으로(상단에서 하단으로) 플렉스 아이템을 배치합니다.

    <style>
        .flex-container {
            display: flex;
            flex-direction: column;
            background-color: dodgerblue;
        }
 
        .flex-container > div {
            background-color: #f1f1f1;
            width: 100px;
            margin: 10px;
            text-align: center;
            line-height: 75px;
            font-size: 30px;
        }
    </style>
</head>
<body>
 
    <h1>The flex-direction Property</h1>
 
    <p>The "flex-direction: column;" stacks the flex items 
    vertically (from top to bottom):</p>
 
    <div class="flex-container">
        <div>1</div>
        <div>2</div>
        <div>3</div>
    </div>
 
</body>

Example

column-reverse값은 수직 방향(하단에서 상단으로)으로 플렉스 아이템을 배치합니다.

    <style>
        .flex-container {
            display: flex;
            flex-direction: column-reverse;
            background-color: dodgerblue;
        }
 
        .flex-container>div {
            background-color: #f1f1f1;
            width: 100px;
            margin: 10px;
            text-align: center;
            line-height: 75px;
            font-size: 30px;
        }
    </style>
</head>
 
<body>
    <h1>The flex-direction Property</h1>
    <p>
      The "flex-direction: column-reverse;" stacks 
      the flex items vertically (but from bottom to top):
    </p>
    <div class="flex-container">
        <div>1</div>
        <div>2</div>
        <div>3</div>
    </div>
</body>

Example

row값은 수평(좌측에서 우측으로)으로 플렉스 아이템을 배치합니다.

  <style>
    .flex-container {
      display: flex;
      flex-direction: row;
      background-color: dodgerblue;
    }
 
    .flex-container>div {
      background-color: #f1f1f1;
      width: 100px;
      margin: 10px;
      text-align: center;
      line-height: 75px;
      font-size: 30px;
    }
  </style>
</head>
 
<body>
  <h1>The flex-direction Property</h1>
  <p>The "flex-direction: row;" stacks the flex items horizontally 
     (from left to right):</p>
  <div class="flex-container">
    <div>1</div>
    <div>2</div>
    <div>3</div>
  </div>        
</body>

Example

row-reverse값은 우측에서 좌측 가로 방향으로 플렉스 아이템을 배치합니다.

  <style>
    .flex-container {
      display: flex;
      flex-direction: row-reverse;
      background-color: dodgerblue;
    }
 
    .flex-container>div {
      background-color: #f1f1f1;
      width: 100px;
      margin: 10px;
      text-align: center;
      line-height: 75px;
      font-size: 30px;
    }
  </style>
</head>
 
<body>
  <h1>The flex-direction Property</h1>
  <p>The "flex-direction: row-reverse;" stacks the flex items horizontally 
     (from right to top):</p>
  <div class="flex-container">
    <div>1</div>
    <div>2</div>
    <div>3</div>
  </div>
</body>

The flex-wrap Property

flex-wrap 속성은 플렉스 아이템의 wrap 여부를 지정합니다.

하기의 예제에는 12개의 플렉스 아이템이 있고, flex-wrap속성을 더 잘 확인할 수 있습니다.

  <style>
    .flex-container {
      display: flex;
      flex-wrap: wrap;
      background-color: dodgerblue;
    }
 
    .flex-container>div {
      background-color: #f1f1f1;
      width: 100px;
      margin: 10px;
      text-align: center;
      line-height: 75px;
      font-size: 30px;
    }
  </style>
</head>
 
<body>
  <h1>The flex-wrap Property</h1>
  <p>The "flex-wrap: wrap;" specifies that the flex items will wrap if necessary:</p>
  <div class="flex-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>

Example

flex-wrap: nowrap 속성은 플렉스 아이템이 wrap되지 않도록 지정합니다.(기본값 입니다.)

  <style>
    .flex-container {
      display: flex;
      flex-wrap: nowrap;
      background-color: dodgerblue;
    }
 
    .flex-container>div {
      background-color: #f1f1f1;
      width: 100px;
      margin: 10px;
      text-align: center;
      line-height: 75px;
      font-size: 30px;
    }
  </style>
</head>
<body>
  <h1>The flex-wrap Property</h1>
  <p>The "flex-wrap: nowrap;" specifies that the flex items will not wrap
  (this is default):</p>
  <div class="flex-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>

Example

flex-wrap: wrap-reverse 속성은 필요한 경우 역순으로 플렉스 아이템이 wrap되도록 지정합니다.

  <style>
    .flex-container {
      display: flex;
      flex-wrap: wrap-reverse;
      background-color: dodgerblue;
    }
 
    .flex-container>div {
      background-color: #f1f1f1;
      width: 100px;
      margin: 10px;
      text-align: center;
      line-height: 75px;
      font-size: 30px;
    }
  </style>
</head>
<body>
 
  <h1>The flex-wrap Property</h1>
  <p>The "flex-wrap: wrap-reverse;" specifies that the flex items will wrap
     if necessary, in reverse order:</p>
  <div class="flex-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>

The flex-flow Property

flex-flow속성은 flex-direction과flex-wrap 속성 2가지 모두를 설정하기 위한 속기 속성입니다.

Example

  <style>
    .flex-container {
      display: flex;
      flex-flow: row wrap;
      background-color: dodgerblue;
    }
 
    .flex-container>div {
      background-color: #f1f1f1;
      width: 100px;
      margin: 10px;
      text-align: center;
      line-height: 75px;
      font-size: 30px;
    }
  </style>
</head>
<body>
 
  <h1>The flex-flow Property</h1>
  <p>The flex-flow property is a shorthand property for the flex-direction 
     and the flex-wrap properties.</p>
  <div class="flex-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>

The justify-content Property

justify-content속성은 플렉스 아이템을 정렬하기 위해 사용합니다.

Example

center값은 컨테이너의 중앙에 플렉스 아이템들을 정렬합니다.

<!DOCTYPE html>
<html lang="en">
 
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Flex Direction Property</title>
    <style>
        .flex-container {
            display: flex;
            justify-content: center;
            background-color: dodgerblue;
        }
 
        .flex-container>div {
            background-color: #f1f1f1;
            width: 100px;
            margin: 10px;
            text-align: center;
            line-height: 75px;
            font-size: 30px;
        }
    </style>
</head>
 
<body>
    <h1>The justify-content Property</h1>
 
    <p>The "justify-content: center;" aligns the flex items 
    at the center of the container:</p>
    <div class="flex-container">
        <div>1</div>
        <div>2</div>
        <div>3</div>
    </div>
</body>
 
</html>

Example

flex-start 속성은 컨테이너의 시작 부분에tj 플렉스 아이템을 정렬합니다 (기본 값입니다.)

  <style>
    .flex-container {
      display: flex;
      justify-content: flex-start;
      background-color: dodgerblue;
    }
 
    .flex-container>div {
      background-color: #f1f1f1;
      width: 100px;
      margin: 10px;
      text-align: center;
      line-height: 75px;
      font-size: 30px;
    }
  </style>
</head>
<body>
 
  <h1>The justify-content Property</h1>
 
  <p>The "justify-content: flex-start;" aligns the flex items 
    at the beginning of the container(this is default):</p>
  <div class="flex-container">
    <div>1</div>
    <div>2</div>
    <div>3</div>
  </div>
 
</body>

Example

flex-end 속성은 컨테이너의 끝 부분에서 플렉스 아이템을 정렬합니다

  <style>
    .flex-container {
      display: flex;
      justify-content: flex-end;
      background-color: dodgerblue;
    }
 
    .flex-container>div {
      background-color: #f1f1f1;
      width: 100px;
      margin: 10px;
      text-align: center;
      line-height: 75px;
      font-size: 30px;
    }
  </style>
</head>
<body>
  <h1>The justify-content Property</h1>
 
  <p>The "justify-content: flex-end;" aligns the flex items 
     at the end of the container:</p>
  <div class="flex-container">
    <div>1</div>
    <div>2</div>
    <div>3</div>
  </div>
 
</body>

Example

space-around속성은 라인의 이전, 사이, 이후에 있는 공간에 플렉스 아이템을 표시합니다.

  <style>
    .flex-container {
      display: flex;
      justify-content: space-around;
      background-color: dodgerblue;
    }
 
    .flex-container>div {
      background-color: #f1f1f1;
      width: 100px;
      margin: 10px;
      text-align: center;
      line-height: 75px;
      font-size: 30px;
    }
  </style>
</head>
 
<body>
  <h1>The justify-content Property</h1>
 
  <p>The "justify-content: space-around;" displays the flex items 
    with space before, between and after the lines:</p>
  <div class="flex-container">
      <div>1</div>
      <div>2</div>
      <div>3</div>
  </div>
 
</body>

Example

space-between 속성은 라인 사이의 공간에 플렉스 아이템을 표시합니다.

  <style>
    .flex-container {
      display: flex;
      justify-content: space-between;
      background-color: dodgerblue;
    }
 
    .flex-container>div {
      background-color: #f1f1f1;
      width: 100px;
      margin: 10px;
      text-align: center;
      line-height: 75px;
      font-size: 30px;
    }
  </style>
</head>
<body>
  <h1>The justify-content Property</h1>
 
  <p>The "justify-content: space-between;" displays the flex items 
    with space between the lines:</p>
  <div class="flex-container">
    <div>1</div>
    <div>2</div>
    <div>3</div>
  </div>
 
</body>

The align-items Property

align-items 속성은 플렉스 아이템을 정렬시키는데에 사용합니다.

하기 예제들에서 200px 높이의 컨테이너를 사용하여 align-items 속성을 더 잘 확인할 수 있습니다.

Example

center값은 컨테이너의 중간에 플렉스 아이템을 정렬시킵니다.

  <style>
    .flex-container {
      display: flex;
      height: 200px;
      align-items: center;
      background-color: dodgerblue;
    }
 
    .flex-container>div {
      background-color: #f1f1f1;
      width: 100px;
      margin: 10px;
      text-align: center;
      line-height: 75px;
      font-size: 30px;
    }
  </style>
</head><body>
  <h1>The align-items Property</h1>
 
  <p>The "align-items: center;" aligns the flex items 
     in the middle of the container:</p>
  <div class="flex-container">
    <div>1</div>
    <div>2</div>
    <div>3</div>
  </div>
 
</body>

Example

flex-start 값은 컨테이너의 상단에 플렉스 아이템들을 정렬합니다.

<!DOCTYPE html>
<html lang="en">
 
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Flex Direction Property</title>
  <style>
    .flex-container {
      display: flex;
      height: 200px;
      align-items: flex-start;
      background-color: dodgerblue;
    }
 
    .flex-container > div {
      background-color: #f1f1f1;
      width: 100px;
      margin: 10px;
      text-align: center;
      line-height: 75px;
      font-size: 30px;
    }
  </style>
</head>
<body>
 
  <h1>The align-items Property</h1>
 
  <p>The "align-items: flex-start;" aligns the flex items 
     at the top of the container:</p>
  <div class="flex-container">
      <div>1</div>
      <div>2</div>
      <div>3</div>
  </div>
 
</body>
</html>

Example

flex-end 값은 컨테이너의 하단에 플렉스 아이템들을 정렬합니다.

  <style>
    .flex-container {
      display: flex;
      height: 200px;
      align-items: flex-end;
      background-color: dodgerblue;
    }
 
    .flex-container>div {
      background-color: #f1f1f1;
      width: 100px;
      margin: 10px;
      text-align: center;
      line-height: 75px;
      font-size: 30px;
    }
  </style>
</head>
<body>
 
  <h1>The align-items Property</h1>
 
  <p>The "align-items: flex-end;" aligns the flex items 
    at the bottom of the container:</p>
  <div class="flex-container">
    <div>1</div>
    <div>2</div>
    <div>3</div>
  </div>
 
</body>

Example

stretch 값은 컨테이너를 채우기 위해 플렉스 아이템들을 펼칩니다.(기본 값입니다):

  <style>
    .flex-container {
      display: flex;
      height: 200px;
      align-items: stretch;
      background-color: dodgerblue;
    }
 
    .flex-container>div {
      background-color: #f1f1f1;
      width: 100px;
      margin: 10px;
      text-align: center;
      line-height: 75px;
      font-size: 30px;
    }
  </style>
</head>
<body>
  <h1>The align-items Property</h1>
 
  <p>The "align-items: stretch;" stretches the flex items 
  to fill the container (this is default):</p>
  <div class="flex-container">
    <div>1</div>
    <div>2</div>
    <div>3</div>
  </div>
 
</body>

Example

baseline 값은 기준선 정렬처럼 플렉스 아이템들을 정렬합니다.

  <style>
    .flex-container {
      display: flex;
      height: 200px;
      align-items: baseline;
      background-color: dodgerblue;
    }
 
    .flex-container>div {
      background-color: #f1f1f1;
      width: 100px;
      margin: 10px;
      text-align: center;
      line-height: 75px;
      font-size: 30px;
    }
  </style>
</head>
<body>
 
  <h1>The align-items Property</h1>
 
  <p>The "align-items: baseline;" aligns the flex items 
     such as their baselines aligns:</p>
  <div class="flex-container">
    <div><h1>1</h1></div>
    <div><h6>2</h6></div>
    <div><h3>3</h3></div>
    <div><small>4</small></div>
  </div>
 
</body>

The align-content Property

align-content 속성은 플렉스 라인들을 정렬하는데 사용됩니다.

하기의 예제들에서 flex-wrap속성이 wrap으로 설정된 600px 높이의 컨테이너를 사용하여, align-content속성을 더 잘 나타냅니다.

Example

space-between값은 플렉스 라인들 사이의 균일한 공간이 있는 플레스 라인들을 표시합니다.

  <style>
    .flex-container {
      display: flex;
      height: 600px;
      flex-wrap: wrap;
      align-content: space-between;
      background-color: dodgerblue;
    }
 
    .flex-container>div {
      background-color: #f1f1f1;
      width: 100px;
      margin: 10px;
      text-align: center;
      line-height: 75px;
      font-size: 30px;
    }
  </style>
</head>
<body>
 
  <h1>The align-content Property</h1>
 
  <p>The "align-content: space-between;" displays the flex lines 
     with equal space between them:</p>
 
  <div class="flex-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>

Example

space-around값은 플렉스 라인들 이전, 사이, 이후의 공간으로 플렉스 라인들을 표시합니다.

  <style>
    .flex-container {
      display: flex;
      height: 600px;
      flex-wrap: wrap;
      align-content: space-around;
      background-color: dodgerblue;
    }
 
    .flex-container > div {
      background-color: #f1f1f1;
      width: 100px;
      margin: 10px;
      text-align: center;
      line-height: 75px;
      font-size: 30px;
    }
  </style>
</head>
<body>
 
  <h1>The align-content Property</h1>
 
  <p>The "align-content: space-around;" displays the flex lines 
     with space before, between and after them:</p>
 
  <div class="flex-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>

Example

stretch 값은 플렉스 라인들을 펼쳐서 남은 공간을 차지합니다.(기본 값)

  <style>
    .flex-container {
      display: flex;
      height: 600px;
      flex-wrap: wrap;
      align-content: stretch;
      background-color: dodgerblue;
    }
 
    .flex-container > div {
      background-color: #f1f1f1;
      width: 100px;
      margin: 10px;
      text-align: center;
      line-height: 75px;
      font-size: 30px;
    }
  </style>
</head>
<body>
 
  <h1>The align-content Property</h1>
 
  <p>The "align-content: stretch;" stretches the flex lines 
    to take up the remaining space (this is default):</p>
 
  <div class="flex-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>

Example

center값은 컨테이너 중간에 플렉스 라인들을 표시합니다.

  <style>
    .flex-container {
      display: flex;
      height: 600px;
      flex-wrap: wrap;
      align-content: center;
      background-color: dodgerblue;
    }
 
    .flex-container > div {
      background-color: #f1f1f1;
      width: 100px;
      margin: 10px;
      text-align: center;
      line-height: 75px;
      font-size: 30px;
    }
  </style>
</head>
<body>
 
  <h1>The align-content Property</h1>
 
  <p>The "align-content: center;" displays the flex lines
    in the middle of the container:</p>
 
  <div class="flex-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>

Example

flex-start값은 컨테이너의 시작 부분에서 플렉스 라인들을 표시합니다.

<style>
    .flex-container {
      display: flex;
      height: 600px;
      flex-wrap: wrap;
      align-content: flex-start;
      background-color: dodgerblue;
    }
 
    .flex-container > div {
      background-color: #f1f1f1;
      width: 100px;
      margin: 10px;
      text-align: center;
      line-height: 75px;
      font-size: 30px;
    }
  </style>
</head>
<body>
 
  <h1>The align-content Property</h1>
 
  <p>The "align-content: flex-start;" displays the flex lines
    at the start of the container.</p>
 
  <div class="flex-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>

Example

flex-end값은 컨테이너의 끝 부분에서 플렉스 라인들을 표시합니다.

  <style>
    .flex-container {
      display: flex;
      height: 600px;
      flex-wrap: wrap;
      align-content: flex-end;
      background-color: dodgerblue;
    }
 
    .flex-container > div {
      background-color: #f1f1f1;
      width: 100px;
      margin: 10px;
      text-align: center;
      line-height: 75px;
      font-size: 30px;
    }
  </style>
</head>
<body>
 
  <h1>The align-content Property</h1>
 
  <p>The "align-content: flex-end;" displays the flex lines
    at the end of the container.</p>
 
  <div class="flex-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>

Perfect Centering

하기의 예제들에서 아주 일반적인 스타일 문제인 완벽한 중앙 정렬 방안을 확인하겠습니다.

SOLUTION: 두 개의 justify-content와 align-items 속성을 center로 설정하면, 플렉스 아이템은 완벽히 중앙으로 정렬될 것입니다.

<style>
    .flex-container {
      display: flex;
      justify-content: center;
      align-items: center;
      height: 300px;
      background-color: DodgerBlue;
    }
 
    .flex-container > div {
      background-color: #f1f1f1;
      color: white;
      width: 100px;
      height: 100px;
    }
  </style>
</head>
<body>
 
  <h1>Perfect Centering</h1>
 
  <p>A container with both the justify-content and the align-items properties 
  set to <em>center</em> will align the item(s) in the center (in both axis).</p>
 
  <div class="flex-container">
    <div></div>
  </div>
 
</body>

All CSS Flexbox Container Properties

Property	Description
align-center	flex-wrap 속성의 작용을 수정합니다. align-items와 유사하지만 플렉스 아이템을 정렬하는 대신 플레스 라인을 정렬합니다.
align-items	아이템들이 교차축에서 이용할 수 있는 모든 공간을 사용하지 않는 경우 플렉스 아이템을 수직으로 정렬합니다.
display	HTML 요소에 사용된 박스 타입을 지정합니다.
flex-direction	플렉스 컨테이너 내부의 플렉스 아이템의 방향을 지정합니다.
flex-flow	flex-direction과 flex-wrap에 대한 단축 속성
flex-wrap	하나의 플렉스 라인에서 플렉스 아이템들을 위한 충분한 공간이 없는 경우, 플렉스 아이템의 float 여부를 지정합니다.
justify-content	플렉스 아이템들이 주축에서 이용가능한 모든 공간을 사용하지 않는 경우, 플렉스 아이템들을 수직으로 정렬합니다.

오션,, CSS, Flex, Container

목차

CSS Flex Container

Parent Element (Container)

Example

The flex-direction Property

Example

Example

Example

Example

The flex-wrap Property

Example

Example

The flex-flow Property

Example

The justify-content Property

Example

Example

Example

Example

Example

The align-items Property

Example

Example

Example

Example

Example

The align-content Property

Example

Example

Example

Example

Example

Example

Perfect Centering

All CSS Flexbox Container Properties