Flex

방향, 정렬, 간격과 줄바꿈으로 요소를 배치합니다.

<sy-flex>설치 안내 기본 사용법

Live preview

컴포넌트를 조작하면 여기에 결과가 표시됩니다.

방향진행 방향 정렬교차 방향 정렬줄바꿈행 간격열 간격안쪽 여백

코드 보기

HTML

<sy-flex
  direction="horizontal"
  justify="start"
  align="center"
  wrap="wrap"
  row-gap="small"
  column-gap="small"
  padding="small"
  height="180px"
>
  <sy-button variant="primary">저장</sy-button>
  <sy-button>미리보기</sy-button>
  <sy-button>취소</sy-button>
</sy-flex>

사용 가이드

버튼 묶음·도구 모음처럼 한 방향으로 항목을 정렬할 때 사용합니다. 페이지 전체 뼈대는 Layout으로 구성하세요.

진행 방향 정렬

justify는 direction이 가리키는 축을 따라 항목을 배치합니다.

교차 방향 정렬

align은 진행 방향에 수직인 축을 정렬합니다. 방향을 바꾸면 두 축도 함께 바뀝니다.

예제

동작 버튼 줄

요소 간격을 유지하고 폭이 줄어들면 다음 줄에 배치합니다.

코드 보기

HTML

<sy-flex
  wrap="wrap"
  padding="none"
  column-gap="small"
>
  <sy-button variant="primary">저장</sy-button>
  <sy-button>미리보기</sy-button>
  <sy-button>취소</sy-button>
</sy-flex>

세로 배치

항목을 세로로 쌓고 교차 방향으로 늘립니다.

코드 보기

HTML

<sy-flex
  direction="vertical"
  align="stretch"
  padding="none"
  row-gap="small"
>
  <sy-button variant="primary">저장</sy-button>
  <sy-button>미리보기</sy-button>
  <sy-button>취소</sy-button>
</sy-flex>

양 끝 정렬

주요 동작과 보조 동작을 양 끝에 둡니다.

코드 보기

HTML

<sy-flex
  justify="space-between"
  align="center"
  padding="none"
  wrap="wrap"
>
  <sy-button>뒤로</sy-button>
  <sy-button variant="primary">계속</sy-button>
</sy-flex>

여러 줄의 간격

행과 열의 간격을 별도로 지정합니다.

코드 보기

HTML

<sy-flex
  wrap="wrap"
  row-gap="medium"
  column-gap="small"
  padding="none"
>
  <sy-button>항목 1</sy-button>
  <sy-button>항목 2</sy-button>
  <sy-button>항목 3</sy-button>
  <sy-button>항목 4</sy-button>
  <sy-button>항목 5</sy-button>
  <sy-button>항목 6</sy-button>
  <sy-button>항목 7</sy-button>
  <sy-button>항목 8</sy-button>
</sy-flex>

기능별 예제

10개 주제에서 필요한 기능을 선택하세요. 속성 설정, 메서드 호출, 이벤트 결과와 슬롯 구성을 실행 화면과 코드로 확인할 수 있습니다.

기능 찾기

사용 예제 · Overview

선택한 예제를 직접 조작해 보세요. 여러 구성이 있는 주제는 세부 예제를 바꿀 수 있습니다.

코드 보기

HTML

예제를 불러오고 있습니다.