HTML CSS JavaScript

CSS flexbox 사용해보기

whs5758 2025. 7. 18. 11:43

CSS 레이아웃은 웹 페이지에서 요소들을 어떻게 배치하고 정렬할지를 결정하는 기술입니다. 쉽게 말해, 웹 페이지라는 캔버스 위에 버튼, 이미지, 텍스트 같은 요소들을 원하는 위치에 예쁘게 배치하는 방법을 말합니다.

Flexbox는 CSS3에서 도입된 레이아웃 모델로, 요소를 수평이나 수직으로 정렬하고 공간을 분배하는 데 매우 유용합니다. 과거에는 테이블 레이아웃이나 float 속성을 사용했지만, Flexbox를 사용하면 훨씬 더 직관적이고 강력하게 레이아웃을 구성할 수 있어요.

1. Flexbox의 기본 개념 이해하기

Flexbox를 잘 사용하려면 몇 가지 기본 개념을 먼저 이해해야 합니다.

(1) Flex Container와 Flex Item

  • Flex Container (플렉스 컨테이너): Flexbox를 적용하는 부모 요소입니다. display: flex;를 설정하면 이 요소가 Flex Container가 됩니다.
  • Flex Item (플렉스 아이템): Flex Container의 직계 자식 요소들입니다. 이 아이템들이 Flexbox 규칙에 따라 배치됩니다.

(2) Main Axis와 Cross Axis

  • Main Axis (주축): Flex Item이 배치되는 기본 방향입니다. flex-direction 속성에 따라 주축이 수평(row) 또는 수직(column)으로 결정됩니다.
  • Cross Axis (교차축): 주축과 수직인 방향입니다. 예를 들어, 주축이 수평이면 교차축은 수직이 됩니다.

(3) Flex Direction

  • flex-direction 속성은 Flex Item이 배치되는 방향을 결정합니다. 값은 다음과 같습니다:
    • row: 왼쪽에서 오른쪽 (기본값).
    • row-reverse: 오른쪽에서 왼쪽.
    • column: 위에서 아래.
    • column-reverse: 아래에서 위.

2. Flexbox 시작하기: 기본 설정

Flexbox를 사용하려면 먼저 HTML 구조를 만들고, CSS에서 Flexbox 속성을 적용해야 합니다. 간단한 예제를 통해 시작해볼게요.

예제 1: 기본 Flexbox 레이아웃

<!DOCTYPE html>
<html lang="ko">
<head>
  <meta charset="UTF-8">
  <style>
    .container {
      display: flex; /* Flex Container 설정 */
      border: 2px solid #2E8B57; /* 시그린 색상 */
      padding: 10px;
    }
    .item {
      width: 100px;
      height: 100px;
      background: #FF6347; /* 토마토 색상 */
      margin: 5px;
      border: 2px solid #4682B4; /* 스틸 블루 색상 */
      border-radius: 10px;
      text-align: center;
      line-height: 100px;
      color: white;
    }
  </style>
</head>
<body>
  <div class="container">
    <div class="item">1</div>
    <div class="item">2</div>
    <div class="item">3</div>
  </div>
</body>
</html>

3. Flex Direction으로 배치 방향 조정하기

flex-direction 속성을 사용하면 Flex Item의 배치 방향을 자유롭게 변경할 수 있습니다. 다양한 값을 적용해보며 결과를 확인해보겠습니다.

예제 2: Flex Direction 변경

선택자 추가 개념 확인

- .container.column 같은 형태를 다중 클래스 선택자라고 부르는 게 일반적입니다.
- CSS에서는 선택자 간의 공백 유무에 따라 의미가 달라지니 주의해야 합니다:
    - 공백 없음 (.container.column): 두 클래스를 모두 가진 요소 선택.
    - 공백 있음 (.container .column): 하위 요소 선택.
<!DOCTYPE html>
<html lang="ko">

<head>
    <meta charset="UTF-8">
    <style>
        .container {
            display: flex;
            flex-direction: row;
            /* 기본값: 수평 방향 */
            border: 2px solid #2E8B57;
            padding: 10px;
            margin-bottom: 20px;
        }

        .container.column {
            flex-direction: column;
            /* 수직 방향 */
        }

        .container.row-reverse {
            flex-direction: row-reverse;
            /* 수평 방향, 순서 반대 */
        }

        .item {
            width: 100px;
            height: 100px;
            background: #32CD32;
            /* 라임 그린 색상 */
            margin: 5px;
            border: 2px solid #4682B4;
            border-radius: 10px;
            text-align: center;
            line-height: 100px;
            color: white;
        }
    </style>
</head>

<body>
    <h3>flex-direction: row</h3>
    <div class="container">
        <div class="item">1</div>
        <div class="item">2</div>
        <div class="item">3</div>
    </div>

    <h3>flex-direction: column</h3>
    <div class="container column">
        <div class="item">1</div>
        <div class="item">2</div>
        <div class="item">3</div>
    </div>

    <h3>flex-direction: row-reverse</h3>
    <div class="container row-reverse">
        <div class="item">1</div>
        <div class="item">2</div>
        <div class="item">3</div>
    </div>
</body>

</html>

4. Flexbox의 주요 속성 익히기

Flexbox에는 레이아웃을 더 세밀하게 조정할 수 있는 다양한 속성이 있습니다. 몇 가지 주요 속성을 배워보겠습니다.

(1) justify-content: 주축 정렬

justify-content는 주축(main-axis)을 기준으로 Flex Item을 정렬합니다.

  • flex-start: 주축의 시작점에 정렬.
  • flex-end: 주축의 끝점에 정렬.
  • center: 주축의 중앙에 정렬.
  • space-between: 첫 아이템과 마지막 아이템을 양 끝에 배치하고 나머지 공간을 균등 분배.
  • space-around: 모든 아이템 주위에 동일한 여백을 둠.
  • space-evenly: 모든 아이템 사이와 양 끝에 동일한 간격을 둠.

예제 3: justify-content 사용

<!DOCTYPE html>
<html lang="ko">

<head>
    <meta charset="UTF-8">
    <style>
        .container {
            display: flex;
            justify-content: space-between;
            /* 주축 정렬 */
            border: 2px solid #2E8B57;
            padding: 10px;
        }

        .item {
            width: 100px;
            height: 100px;
            background: #FFD700;
            /* 골드 색상 */
            margin: 5px;
            border: 2px solid #4682B4;
            border-radius: 10px;
            text-align: center;
            line-height: 100px;
            color: white;
        }
    </style>
</head>

<body>
    <div class="container">
        <div class="item">1</div>
        <div class="item">2</div>
        <div class="item">3</div>
    </div>
</body>

</html>

 

(2) align-items: 교차축 정렬

align-items는 교차축(cross-axis)을 기준으로 Flex Item을 정렬합니다.

  • flex-start: 교차축의 시작점에 정렬.
  • flex-end: 교차축의 끝점에 정렬.
  • center: 교차축의 중앙에 정렬.
  • stretch: 교차축 방향으로 아이템을 늘림(기본값).
  • baseline: 아이템의 텍스트 기준선에 맞춰 정렬.

예제 4: align-items 사용

<!DOCTYPE html>
<html lang="ko">

<head>
    <meta charset="UTF-8">
    <style>
        .container {
            display: flex;
            align-items: start;
            /* 교차축 정렬 */
            height: 400px;
            /* 컨테이너 높이 설정 */
            border: 2px solid #2E8B57;
            padding: 10px;
        }

        .item {
            width: 100px;
            height: 100px;
            background: #FF6347;
            margin: 5px;
            border: 2px solid #4682B4;
            border-radius: 10px;
            text-align: center;
            line-height: 100px;
            color: white;
        }
    </style>
</head>

<body>
    <div class="container">
        <div class="item">1</div>
        <div class="item">2</div>
        <div class="item">3</div>
    </div>
</body>

</html>
 도전 과제 - 1
flexbox 를 사용해서 자식 요소들을 정 가운데 배치 하기
flexbox 유효 범위는 바로 아래 자식 요소 까지만 유효 하다. 

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>

        body {
          margin: 0;
          padding: 0;
          height: 100vh;
          box-sizing: border-box;
          display: flex;
          justify-content: center;
          align-items: center;
        }
        /* 1. flex item 개념을 사용하려면 부모가 flex container 이여야 한다. */
        .flex-contaienr {
          display: flex;
          flex-direction: row;
          justify-content: center;
          align-items: center;
          background-color: aqua;
        }

        .flex-item {
            width: 300px;
            height: 300px;
            border: 1px solid black;
            background-color: blue;
            padding: 50px;
            margin: 50px;
            display: flex;
            justify-content: center;
            align-items: center;
        }

        .flex-item-child {
          width: 150px;
          height: 150px;
          background-color: beige;
          display: flex;  
          justify-content: center;
          align-items: center;
          border-radius: 30px;
        }


    </style>
    
  </head>
  <body>
    <div class="flex-container">
         <div class="flex-item">
            <div class="flex-item-child">item child</div>      
         </div>
    </div>
  </body>
</html>

 

'HTML CSS JavaScript' 카테고리의 다른 글

CSS 우선순위와 상속  (1) 2025.07.18
CSS flexbox 사용해보기(2)  (0) 2025.07.18
CSS Float와 Clear 속성  (0) 2025.07.18
CSS Transition(부드러운 애니메이션 만들기)  (1) 2025.07.18
CSS position 관련 속성(Position, Z-Index, Overflow)  (3) 2025.07.18

'HTML CSS JavaScript'의 다른글

  • 현재글CSS flexbox 사용해보기

관련글

티스토리툴바