Flex

Flexbox 레이아웃을 쉽게 구성할 수 있는 컴포넌트

Box 1

Box 2

Box 3

설치

사용법

Flex를 import하여 사용합니다. direction, align, justify, gap 등의 prop으로 레이아웃을 제어합니다.

예제

정렬

justify와 align prop으로 아이템을 배치합니다.

Logo

Home

About

Contact

줄바꿈

wrap prop으로 아이템이 넘칠 때 줄바꿈 동작을 제어합니다.

1

2

3

4

5

6

7

8

9

10

방향

direction prop으로 주축 방향을 설정합니다.

Item 1

Item 2

Item 3

접근성

WCAG 2.1 / KWCAG 2.2 AA 기준을 준수합니다.

시맨틱 마크업: Flex는 의미론적으로 중립적인 <div> 요소를 사용합니다. 필요시 적절한 시맨틱 태그나 ARIA 역할을 추가하세요.
키보드 탐색: Flex 내부 요소들의 Tab 순서가 시각적 배치와 일치하도록 주의하세요. row-reverse나 column-reverse 사용 시 Tab 순서 고려 필요
반응형 레이아웃: 다양한 화면 크기에서 콘텐츠가 적절히 배치되어 모든 사용자가 접근 가능
포커스 관리: 인터랙티브 요소들이 논리적인 순서로 포커스를 받을 수 있도록 구성