본문으로 건너뛰기

Flex

Flex display:flex 속성의 div 를 래핑한 컴포넌트입니다.

박스 형태의 페이지 레이아웃을 잡는데에 유용하게 사용할 수 있습니다. 부모 컨테이너의 크기에 기본적으로 의존을 하고, 기본 flex 속성 '1 1 auto' 를 가지기 때문에 균등하게 분할되어 크기가 자동 조절됩니다.

const BASE_HEIGHT = '250px';
export function FlexBasic(){
  return <Frame>
    <FlexCore flexGap="10px">
      
      <Flex flexHeight={BASE_HEIGHT}>
        <Flex flexAlign="center">1</Flex>
        <Flex flexAlign="center">2</Flex>
        <Flex flexAlign="center">3</Flex>
      </Flex>

    </FlexCore>
  </Frame>
}

속성 설명​

(optional) rowDirection​

rowDirection = boolean

rowDirection 이 true 이면 flex item 들이 row 방향으로 정렬됩니다. 기본값은 false 입니다.

const BASE_HEIGHT = '250px';
export function FlexDirection(){
  return <Frame>
    <FlexCore flexGap="10px">

      <div>FlexDirection : Column</div>
      <Flex flexHeight={BASE_HEIGHT}>
        <Flex flexAlign="center">1</Flex>
        <Flex flexAlign="center">2</Flex>
        <Flex flexAlign="center">3</Flex>
      </Flex>

      <div>FlexDirection : Row</div>
      <Flex rowDirection flexHeight={BASE_HEIGHT}>
        <Flex flexAlign="center">1</Flex>
        <Flex flexAlign="center">2</Flex>
        <Flex flexAlign="center">3</Flex>
      </Flex>

    </FlexCore>
  </Frame>
}

(optional) flexSize​

flexSize = string

flexSize 는 부모 Flex 안에서 고정된 크기를 지정합니다.

const BASE_HEIGHT = '250px';
export function FlexSize(){
  return <Frame>
    <FlexCore flexGap="10px">

      <div>Flex : Column</div>
      <Flex flexHeight={BASE_HEIGHT} >
        <Flex flexSize="150px" flexAlign="center">1</Flex>
        <Flex flexAlign="center">2</Flex>
        <Flex flexAlign="center">3</Flex>
      </Flex>

      <div>Flex : Row</div>
      <Flex rowDirection flexHeight={BASE_HEIGHT} >
        <Flex flexSize="150px" flexAlign="center">1</Flex>
        <Flex flexAlign="center">2</Flex>
        <Flex flexAlign="center">3</Flex>
      </Flex>

    </FlexCore>
  </Frame>
}

flexSize 는 rowDirection 에 따라 자동으로 크기를 결정합니다. 만약 위의 예시처럼 flexSize="150px" 로 줬을때 flex가 column 방향일때는 높이를 지정하고, row 방향일때는 너비를 지정합니다.

이런 특성은 특정 flex 아이템들의 크기를 고정값으로 주고, 나머지 아이템들은 자동으로 채우게 할때 유용합니다.

아래와 같이 flexSize 를 "fit-content" 로 주는 경우에는 children 의 크기에 영향을 받게 됩니다. 나머지 flex 아이템들의 행동은 동일합니다.

...
<div>Flex : Column</div>
<Flex flexHeight={BASE_HEIGHT} >
  <Flex flexSize="fit-content" flexAlign="center">
    <Flex flexHeight="170px" bg="lightgreen">170px child</Flex>
  </Flex>
  <Flex flexAlign="center">2</Flex>
  <Flex flexAlign="center">3</Flex>
</Flex>

<div>Flex : Row</div>
<Flex rowDirection flexHeight={BASE_HEIGHT} >
  <Flex flexSize="fit-content" flexAlign="center">
    <Flex flexWidth="170px" bg="lightgreen">170px child</Flex>
  </Flex>
  <Flex flexAlign="center">2</Flex>
  <Flex flexAlign="center">3</Flex>
</Flex>
...

(optional) flexAlign​

flexAlign = FlexContentAlign = 'left-top'|'left-center'|'left-bottom'
|'center-top'|'center'|'center-bottom'
|'right-top'|'right-center'|'right-bottom'

flexAlign 속성으로 Flex 내의 children 을 9방향으로 정렬할 수 있습니다. 내부적으로 flex 의 justify-content 와 align-items 를 자동으로 적용합니다.

(optional) debug​

debug = boolean

이 값이 true 이면 Flex 의 현재 경계선을 보여줍니다.

css 속성​

style 에 있는 속성을 flex 라는 prefix 를 붙여서 Flex 의 속성으로 처리한 것들이 있습니다. 자주 사용되는 것 위주로 되어 있습니다.

(optional) flexGap​

css 의 gap 속성입니다.

(optional) flexWidth​

css 의 width 속성입니다.

(optional) flexHeight​

css 의 height 속성입니다.

(optional) flexOverflow​

css 의 overflow 속성입니다.

(optional) flexGrow​

css 의 grow 속성입니다.

(optional) flexShrink​

css 의 shrink 속성입니다.

(optional) flexPadding​

css 의 padding 속성입니다.

(optional) flexMargin​

css 의 margin 속성입니다.

(optional) alignItems​

css 의 align-items 속성입니다.

(optional) justifyContent​

css 의 justify-content 속성입니다.