최원종의 개발 블로그

CSS flexbox 사용해보기 - 13 본문

HTML_CSS/사전학습

CSS flexbox 사용해보기 - 13

chl6698 2026. 4. 17. 16:50 
CSS 레이아웃은 웹 페이지에서 요소들을 어떻게 배치하고 정렬할지를 결정하는 기술

웹 페이지라는 캔버스 위에 버튼, 이미지, 텍스트 같은 요소들을 원하는 위치에 예쁘게 배치하는 방법

 Flexbox 

Flexbox는 CSS3에서 도입된 레이아웃 모델로,
요소를 수평이나 수직으로 정렬하고 공간을 분배하는 데 매우 유용

과거에는 테이블 레이아웃이나 float 속성을 사용했지만, 
Flexbox를 사용하면 훨씬 더 직관적이고 강력하게 레이아웃을 구성

1. Flexbox의 기본 개념 이해

Flex Container와 Flex Item

- **Flex Container (플렉스 컨테이너)**: Flexbox를 적용하는 부모 요소. 
display: flex;를 설정하면 이 요소가 **Flex Container**가 된다.

- **Flex Item (플렉스 아이템)**: Flex Container의 **직계 자식 요소**들. 
이 아이템들이 Flexbox 규칙에 따라 배치된다.

Main Axis와 Cross Axis

- **Main Axis (주축)**: Flex Item이 배치되는 기본 방향. 
flex-direction 속성에 따라 주축이 수평(row) 또는 수직(column)으로 결정된다.

- **Cross Axis (교차축)**: 주축과 수직인 방향.
예를 들어, 주축이 수평이면 교차축은 수직이 된다.

 

Flex Direction

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

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

Flexbox를 사용하려면 먼저 HTML 구조를 만들고, CSS에서 Flexbox 속성을 적용해야 함

 

예제코드 1

<!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>
      .container {
        display: flex;
        border: 2px solid green;
        margin: 10px;
        padding: 10px;
      }

      .item {
        width: 100px;
        height: 100px;
        background-color: orangered;
        margin: 5px;
        border: 2px solid black;
        text-align: center;
        color: white;
        display: flex;
        justify-content: center;
        align-items: center;
      }
    </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

<!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>
      .container {
        display: flex;
        flex-direction: row;
        border: 2px solid #32cd32;
        padding: 10px;
      }
      .item {
        width: 100px;
        height: 100px;
        background-color: #32cd32;
        border-radius: 10%;
        margin: 5px;
        border: 2px solid brown;
        color: white;
        display: flex;
        text-align: center;
        justify-content: center;
        align-items: center;
      }
      .column {
        flex-direction: column;
      }
      .row-reverse {
        flex-direction: row-reverse;
      }
    </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>

 

'HTML_CSS > 사전학습' 카테고리의 다른 글

CSS flexbox 사용해보기 - 14  (1) 2026.04.17
CSS position 관련 속성(Position, Z-Index) - 12  (0) 2026.04.17
CSS 박스 모델에 이해 - 11  (0) 2026.04.17
CSS 선택자(속성 선택자) - 10  (0) 2026.04.17
CSS 선택자(가상 클래스 선택자) - 9  (0) 2026.04.16
'HTML_CSS/사전학습' Related Articles more