0Pricing
CSS Academy · 강의

Display Flex와 Flex Direction

컨테이너에서 flexbox를 활성화하고 flex-direction으로 주축 방향을 제어합니다.

Display Flex와 Flex Direction은(는) CoddyKit의 무료 CSS Academy 강의입니다. 이것은 4개 중 1번째 강의입니다. 아래에서 전체 강의를 무료로 읽을 수 있으며, 내장 코드 에디터와 24/7 AI 튜터와 함께 브라우저에서 직접 실습할 수 있습니다. 이 강의는 CSS Academy 학습 경로의 일부이며, 진행 상황이 웹과 CoddyKit 앱에 동기화됩니다. CSS Academy 강의에는 총 4개의 강의가 포함되어 있습니다.

Flexbox 활성화

Flexbox는 컨테이너 요소(플렉스 컨테이너)에 display: flex를 설정하여 활성화합니다. 직접적인 자식 요소는 자동으로 플렉스 항목이 됩니다.

<nav class="nav">
    <a href="#">Home</a>
    <a href="#">About</a>
    <a href="#">Contact</a>
  </nav>

인라인 플렉스

display: inline-flex는 블록으로 배치하는 대신 inline-block처럼 인라인으로 흐르는 플렉스 컨테이너를 만듭니다. 내부 플렉스박스 동작은 동일합니다.

<p>Status: <span class="badge">🔥 Trending</span></p>

주축과 교차축

Flexbox에는 두 개의 축이 있습니다:

  • 주축: 항목이 배치되는 기본 방향
  • 교차축: 주축에 수직인 방향

모든 플렉스 속성은 고정된 방향이 아니라 이 축을 기준으로 작동합니다.

flex-direction: row (기본값)

기본 방향은 row입니다. 항목은 가로 주축을 따라 왼쪽에서 오른쪽으로 배치됩니다.

<nav class="nav">
    <a href="#">Home</a>
    <a href="#">About</a>
    <a href="#">Contact</a>
  </nav>

flex-direction: column

flex-direction: column은 항목을 세로로 쌓습니다. 주축은 세로가 되고 교차축은 가로가 됩니다.

<div class="sidebar">
    <div>Dashboard</div>
    <div>Reports</div>
    <div>Settings</div>
  </div>

flex-direction: row-reverse

row-reverse는 가로 방향을 반대로 바꿉니다. 항목은 오른쪽에서 왼쪽으로 배치되고 주축의 시작점은 오른쪽에 놓입니다.

<nav class="rtl-nav">
    <a href="#">Home</a>
    <a href="#">About</a>
    <a href="#">Contact</a>
  </nav>

flex-direction: column-reverse

column-reverse는 항목을 아래에서 위로 쌓습니다. 마지막 항목이 맨 위에 표시됩니다.

<div class="chat-list">
    <div>Hey there!</div>
    <div>How are you?</div>
    <div>Doing great, thanks!</div>
  </div>

flex-direction은 모든 플렉스 속성에 영향을 줍니다

flex-direction을 변경하면 justify-content의 방향도 바뀝니다. 방향이 column이면 justify-content는 가로축이 아니라 세로축을 따라 정렬합니다.

간단한 가로 레이아웃

가장 간단한 플렉스박스 사용 사례는 내비게이션의 항목을 가운데 정렬하는 것입니다:

<nav class="nav">
    <div>Logo</div>
    <a href="#">Home</a>
    <a href="#">Pricing</a>
    <a href="#">Contact</a>
  </nav>

간단한 세로 레이아웃

카드 콘텐츠를 세로와 가로 방향 모두에서 가운데 정렬하는 방법입니다:

<div class="card">
    <h3>Welcome</h3>
    <p>Centered content</p>
  </div>

flex-flow 단축 속성

flex-flow는 flex-direction과 flex-wrap을 줄여서 표현한 속성입니다:

<div class="grid">
    <div>1</div>
    <div>2</div>
    <div>3</div>
    <div>4</div>
  </div>

빠른 확인

flex-direction: column이 설정되어 있을 때 justify-content는 어느 축을 제어합니까?

정리

컨테이너에 display: flex를 설정하면 자식 요소를 위한 플렉스 컨텍스트가 생성됩니다. flex-direction은 주축의 방향을 설정합니다. row는 가로 방향이고 column은 세로 방향입니다. 모든 플렉스 정렬 속성은 고정된 왼쪽/오른쪽/위/아래 방향이 아니라 이 축을 기준으로 작동합니다.

자주 묻는 질문

“Display Flex와 Flex Direction” 강의는 무료인가요?

네 — “Display Flex와 Flex Direction” 전체 내용을 이 웹사이트에서 무료로 읽을 수 있습니다. 인터랙티브하게 실습하려면(내장 코드 에디터와 24/7 AI 튜터), CoddyKit PRO로 업그레이드하면 CSS Academy 강의 전체를 잠금 해제할 수 있습니다. CSS Academy 강의에는 총 4개의 강의가 포함되어 있습니다.

“Display Flex와 Flex Direction”에서 뭘 배우나요?

컨테이너에서 flexbox를 활성화하고 flex-direction으로 주축 방향을 제어합니다. 브라우저에서 직접 실행하는 실습 코드로 CSS Academy을(를) 배우며, 24/7 AI 튜터가 강의를 진행하면서 질문에 답변해줍니다.

CSS Academy을(를) 시작하는 데 경험이 필요한가요?

사전 경험은 필요하지 않습니다. CoddyKit의 CSS Academy은(는) 초급자부터 고급 학습자까지를 위해 구성되어 있으므로, 여기서 시작하거나 처음부터 시작할 수 있으며 자신의 속도대로 진행할 수 있습니다. 이것은 4개 중 1번째 강의입니다.

“Display Flex와 Flex Direction” 강의는 얼마나 걸리나요?

대부분의 CoddyKit 강의는 약 5~10분이 소요됩니다. 각 강의는 간결하고 인터랙티브하여 꾸준한 진행이 가능하며, 웹과 앱에서 중단한 부분부터 바로 시작할 수 있습니다.

이 CSS Academy 강의에서 코드를 작성하고 실행할 수 있나요?

네. 모든 CSS Academy 강의에는 내장 코드 에디터가 포함되어 있으므로, 브라우저에서 바로 실제 코드를 작성하고 실행한 후 즉시 AI 피드백을 받을 수 있습니다 — 로컬 설정이 필요 없습니다.

이 강의의 모든 강의

  1. Display Flex와 Flex Direction
  2. Justify-Content와 Align-Items
  3. Flex Wrap과 Align-Content
  4. Flex Grow, Shrink와 Basis
← CSS Academy(으)로 돌아가기