Flex

CSS Flexbox 기반의 1차원 레이아웃 시스템입니다. Grid와 같은 방식으로 부모에서 균등 배치·비율·간격·반응형 크기를 제어하고, 필요한 경우에만 FlexItem을 사용합니다.

기본 페이지 레이아웃

Grid 예시와 동일하게 헤더와 푸터는 전체 너비를 사용하고, 본문은 md 이상에서 사이드바 3/12와 콘텐츠 9/12로 나눕니다.

Header

Main content

콘텐츠가 있는 페이지 레이아웃

기본 레이아웃의 Main content 안에 제목·설명과 반응형 콘텐츠 섹션을 배치한 활용 예시입니다.

Header

Main content

페이지 제목과 설명이 들어가는 기본 콘텐츠 영역입니다.

Content section

주요 정보나 기능을 배치합니다.

Content section

관련 정보나 보조 콘텐츠를 배치합니다.

부모 클래스로 제어

방향·비율·자식 일괄 span은 부모 Flex에 지정합니다.

flex_cols-3

flex_ratio-2-1

flex_items-span-4

12열 전체 활용

12열 시스템의 각 열을 하나씩 사용합니다. itemSpan={1}을 부모에 지정하면 12개 항목이 한 행의 전체 열을 채웁니다.

균등 항목

flex_cols-*로 동일 너비 항목 수를 지정합니다. gap을 제외한 공간을 정확히 균등 분할합니다.

cols 2

cols 4

비율 항목

flex_ratio-*로 2~3개 항목의 grow 비율을 부모에서 지정합니다.

1 : 2

자식 일괄 span (12단위)

모든 자식이 같은 너비일 때 itemSpan을 부모에 지정합니다. itemSpan={6}이면 한 줄에 2개씩 배치됩니다.

span 6

span 3

자식별 span (혼합 레이아웃)

항목마다 너비가 다를 때 FlexItem의 span을 사용합니다. 8+4, 4+4+4처럼 개별 제어할 수 있습니다.

span 8

span 4

간격

flex_gap-sm · flex_gap-lg · flex_gap-none은 부모에 지정합니다.

gap sm

gap lg

반응형

Flex의 colsMd · colsLg와 itemSpanMd · itemSpanLg, FlexItem의 spanMd · spanLg로 반응형 배치를 제어합니다.

1 → md 2 → lg 3개

span 12 → md 6 → lg 4

개별 span 12 → md 8 → lg 9

개별 span 12 → md 4 → lg 3

자동 배치

flex_auto-fit은 --flex-auto-min을 기준으로 항목을 자동 줄바꿈하고 남는 공간을 채웁니다.

auto-fit

API · Flex Props

Prop	타입	기본값	설명
`direction`	'row' \| 'column'	'row'	기본 배치 방향
`directionMd`	'row' \| 'column'	—	md 이상 배치 방향
`directionLg`	'row' \| 'column'	—	lg 이상 배치 방향
`wrap`	boolean	false	자식 줄바꿈 (flex_wrap)
`cols`	number \| string	—	균등 항목 수 (flex_cols-*)
`colsMd`	number \| string	—	md 이상 균등 항목 수
`colsLg`	number \| string	—	lg 이상 균등 항목 수
`ratio`	'1-1' \| '2-1' \| '1-2' \| '3-1' \| '1-1-1' \| '1-2-1'	—	2~3개 자식의 grow 비율
`itemSpan`	number \| string	—	모든 자식의 12단위 너비 (flex_items-span-*)
`itemSpanMd`	number \| string	—	md 이상 자식 일괄 너비
`itemSpanLg`	number \| string	—	lg 이상 자식 일괄 너비
`gap`	'sm' \| 'lg' \| 'none'	—	항목 간격. 생략 시 --flex-gap
`align`	'start' \| 'center' \| 'end' \| 'stretch' \| 'baseline'	'stretch'	교차축 정렬
`justify`	'start' \| 'center' \| 'end' \| 'between' \| 'around' \| 'evenly'	—	주축 정렬
`equal`	boolean	false	모든 자식에 동일 grow 적용
`autoFit`	boolean	false	최소 너비를 기준으로 항목 자동 배치

API · FlexItem Props

Prop	타입	기본값	설명
`as`	string	'div'	FlexItem이 렌더링할 HTML 요소 (예: header, aside, section, footer)
`span`	number \| string	—	12단위 개별 너비
`spanMd`	number \| string	—	md 이상 개별 너비
`spanLg`	number \| string	—	lg 이상 개별 너비
`grow`	boolean	false	남는 공간 채우기 (flex_grow)
`fit`	boolean	false	콘텐츠 너비 유지 (flex_fit)
`align`	'auto' \| 'start' \| 'center' \| 'end' \| 'stretch' \| 'baseline'	—	해당 항목의 교차축 정렬
`order`	1–12	—	시각적 배치 순서

API · Flex Children

Children	설명
`children`	Flex 자식 콘텐츠 (Vue default 슬롯 대응)

API · FlexItem Children

Children	설명
`children`	Flex 항목 내부 콘텐츠 (Vue default 슬롯 대응)

클래스 · 속성

React 컴포넌트가 렌더하는 OOCSS 클래스입니다. HTML 마크업에서도 동일하게 조합합니다.

클래스	설명
`flex · flex_row · flex_col`	Flex 루트와 배치 방향
`flex_row-md · flex_col-md · flex_row-lg · flex_col-lg`	반응형 배치 방향
`flex_wrap`	항목 줄바꿈
`flex_cols-* · flex_cols-md-* · flex_cols-lg-*`	균등 항목 수
`flex_ratio-* · flex_equal`	자식 비율 · 균등 grow
`flex_auto-fit`	최소 너비 기반 자동 줄바꿈 배치
`flex_items-span-* · flex_items-span-md-* · flex_items-span-lg-*`	모든 자식의 12단위 너비
`flex_item-span-* · flex_item-span-md-* · flex_item-span-lg-*`	개별 자식의 12단위 너비
`flex_gap-sm · flex_gap-lg · flex_gap-none`	간격 변형
`flex_align-* · flex_justify-* · flex_self-*`	부모·자식 정렬
`flex_grow · flex_fit · flex_order-*`	자식 grow · 고정 너비 · 순서

디자인 토큰

토큰	기본값	설명
`--flex-gap`	var(--space-md)	기본 간격
`--flex-gap-sm · --flex-gap-lg`	var(--space-sm) · var(--space-lg)	간격 변형
`--flex-auto-min`	10rem	자동 배치 항목의 최소 너비