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 속성입니다.