Granite

한국어

English

한국어

English

Appearance

Flex ​

Flex는 자식 요소들을 Flexbox 레이아웃을 기준으로 배치하는 컴포넌트예요. Flexbox를 사용하면, 가로 및 세로 방향으로 요소들을 쉽게 정렬하고, 중앙 정렬을 간편하게 설정할 수 있어요. 자식 요소를 정 중앙에 배치할 때에는 Flex.Center, 세로 중앙에 배치할 때에는 Flex.CenterVertical, 가로 중앙에 배치할 때에는 Flex.CenterHorizontal을 사용해요.

시그니처 ​

typescript
Flex: FlexType

파라미터 ​

  • propsobject

    컴포넌트에 전달되는 props 객체예요.

    • props.align'flex-start' | 'flex-end' | 'center' | 'stretch' | 'baseline' · 'stretch'

      중심축 기준(Flex 방향)으로 자식 요소를 정렬하는 설정 값이에요. 'column' 방향을 예로 들면 'center'는 수평 중앙에 배치하고, 'stretch'는 요소의 폭이 'auto'인 경우 부모의 폭에 맞게 늘려요. 이 값은 `alignItems`에 적용되며, 기본값은 'stretch'예요.

    • props.justify'flex-start' | 'flex-end' | 'center' | 'space-between' | 'space-around' | 'space-evenly' · 'flex-start'

      교차축(Flex 방향의 교차 방향) 기준으로 자식 요소를 정렬하는 설정 값이에요. 'column' 방향을 예로 들어, flex-start는 요소를 부모의 위쪽에 배치하고, 'center'는 부모의 수직 중앙에 배치해요. 이 값은 `justifyContent`에 적용되며, 기본값은 'flex-start'예요.

    • props.direction'column' | 'row' · 'column'

      자식 요소들이 배치될 방향을 설정하는 값이에요. `flexDirection`에 적용되며, 기본값은 'column'이에요.

    • props.styleViewProps['style']

      Flex 컴포넌트에 적용할 style 객체예요. Flexbox 레이아웃 외에 컴포넌트의 배경색, 테두리, 여백 등 다른 스타일을 지정할 때 사용해요. 기본값은 undefined에요.

프로퍼티 ​

  • CenterFlexCenter

    Flex.Center는 자식 요소들을 Flex Layout 기준으로 가로와 세로 모두 정 중앙에 배치하는 컴포넌트예요.

  • CenterVerticalFlexCenterVertical

    Flex.CenterVertical는 자식 요소들을 Flex Layout 기준으로 세로 방향으로 중앙에 정렬하기 위한 컴포넌트예요.

  • CenterHorizontalFlexCenterHorizontal

    Flex.CenterHorizontal는 자식 요소들을 Flex Layout 기준으로 가로 방향으로 중앙에 정렬하기 위한 컴포넌트예요.

예제 ​

가로, 세로 방향으로 요소들을 배치하는 예제예요. ​

tsx
import { Flex } from '@granite-js/react-native';
import { Text } from 'react-native';

function FlexExample() {
  return (
    <>
      <Flex direction="column">
        <Text>세로로 배치해요</Text>
        <Text>1</Text>
        <Text>2</Text>
        <Text>3</Text>
      </Flex>
      <Flex direction="row">
        <Text>가로로 배치해요</Text>
        <Text>1</Text>
        <Text>2</Text>
        <Text>3</Text>
      </Flex>
    </>
  );
}