View on GitHubdisplay: flexのラッパーコンポーネント
Example#
Props#
| Name | Type | Default | Description |
|---|---|---|---|
| as | keyof HTMLElementTagNameMap | ReactElement<ComponentType<FC<PropsWithoutText | PropsWithTextBody>>, string | JSXElementConstructor<...>> | div | レンダリングされるHTML要素 |
| spacing optional | "xxs" | "xs" | "sm" | "md" | "lg" | "xl" | "xxl" | - | 子要素同士の間隔。指定しない場合は0 xxs=4px, xs=8px, sm=12px, md=16px, lg=24px, xl=40px, xxl=64px |
| direction | "row" | "column" | row | direction 重ねる向き |
| alignItems | "normal" | "flex-start" | "center" | "flex-end" | "stretch" | "baseline" | flex-start | 主軸方向における子要素のレイアウトを定める。`direction` prop が `column` の場合は水平軸、 `row` の場合は垂直軸のレイアウトを制御する。水平軸の場合に、ブロックレベル要素を幅いっぱいに占有させたい場合は `normal` を使うこと |
| justifyContent | "normal" | "flex-start" | "center" | "flex-end" | "space-between" | "space-around" | "space-evenly" | flex-start | 交差軸方向における子要素のレイアウトを定める。directionが `column` の場合は垂軸直、`row` の場合は水平軸のレイアウトを制御する。水平軸の場合に、ブロックレベル要素を幅いっぱいに占有させたい場合は `normal` を使うこと |
| wrap | boolean | false | 折り返しの有無 |
| height optional | "full" | - | 親要素に対し、100%としたい場合に使用 |
| width optional | "full" | CSSWitdh | - | 幅を指定。fullは後方互換のために残している デフォルト<Flex>は横幅いっぱいを専有する。しかし例えば、フレックスコンテナの子要素として配置した場合、横幅が自身の子に合わせて小さくなる。これが不都合の場合に100%とする |
| inline | boolean | false | inline-flexとして扱う |
| m optional | "xxs" | "xs" | "sm" | "md" | "lg" | "xl" | "xxl" | - | 四方のマージンを一括で設定。Spacing Tokenのキーを指定 xxs=4px, xs=8px, sm=12px, md=16px, lg=24px, xl=40px, xxl=64px |
| mx optional | "xxs" | "xs" | "sm" | "md" | "lg" | "xl" | "xxl" | - | 水平方向のマージンを一括で設定。Spacing Tokenのキーを指定 xxs=4px, xs=8px, sm=12px, md=16px, lg=24px, xl=40px, xxl=64px |
| my optional | "xxs" | "xs" | "sm" | "md" | "lg" | "xl" | "xxl" | - | 垂直方向のマージンを一括で設定。Spacing Tokenのキーを指定 xxs=4px, xs=8px, sm=12px, md=16px, lg=24px, xl=40px, xxl=64px |
| mt optional | "xxs" | "xs" | "sm" | "md" | "lg" | "xl" | "xxl" | - | 上方向のマージン。Spacing Tokenのキーを指定 |
| mr optional | "xxs" | "xs" | "sm" | "md" | "lg" | "xl" | "xxl" | - | 右方向のマージン。Spacing Tokenのキーを指定 xxs=4px, xs=8px, sm=12px, md=16px, lg=24px, xl=40px, xxl=64px |
| mb optional | "xxs" | "xs" | "sm" | "md" | "lg" | "xl" | "xxl" | - | 下方向のマージン。Spacing Tokenのキーを指定 xxs=4px, xs=8px, sm=12px, md=16px, lg=24px, xl=40px, xxl=64px |
| ml optional | "xxs" | "xs" | "sm" | "md" | "lg" | "xl" | "xxl" | - | 左方向のマージン。Spacing Tokenのキーを指定 xxs=4px, xs=8px, sm=12px, md=16px, lg=24px, xl=40px, xxl=64px |
| p optional | "xxs" | "xs" | "sm" | "md" | "lg" | "xl" | "xxl" | - | 四方のパディングを一括で設定。Spacing Tokenのキーを指定 xxs=4px, xs=8px, sm=12px, md=16px, lg=24px, xl=40px, xxl=64px |
| px optional | "xxs" | "xs" | "sm" | "md" | "lg" | "xl" | "xxl" | - | 水平方向のパディングを一括で設定。Spacing Tokenのキーを指定 xxs=4px, xs=8px, sm=12px, md=16px, lg=24px, xl=40px, xxl=64px |
| py optional | "xxs" | "xs" | "sm" | "md" | "lg" | "xl" | "xxl" | - | 垂直方向のパディングを一括で設定。Spacing Tokenのキーを指定 xxs=4px, xs=8px, sm=12px, md=16px, lg=24px, xl=40px, xxl=64px |
| pt optional | "xxs" | "xs" | "sm" | "md" | "lg" | "xl" | "xxl" | - | 上方向のパディング。Spacing Tokenのキーを指定 |
| pr optional | "xxs" | "xs" | "sm" | "md" | "lg" | "xl" | "xxl" | - | 右方向のパディング。Spacing Tokenのキーを指定 xxs=4px, xs=8px, sm=12px, md=16px, lg=24px, xl=40px, xxl=64px |
| pb optional | "xxs" | "xs" | "sm" | "md" | "lg" | "xl" | "xxl" | - | 下方向のパディング。Spacing Tokenのキーを指定 xxs=4px, xs=8px, sm=12px, md=16px, lg=24px, xl=40px, xxl=64px |
| pl optional | "xxs" | "xs" | "sm" | "md" | "lg" | "xl" | "xxl" | - | 左方向のパディング。Spacing Tokenのキーを指定 xxs=4px, xs=8px, sm=12px, md=16px, lg=24px, xl=40px, xxl=64px |
| minWidth optional | CSSMinWidth | - | 最小幅 @defaultValue auto |
| maxWidth optional | CSSMaxWidth | - | 最大幅 @defaultValue none |
| data-* optional | string | - | Custom data attributes |
Feature#
フレックスボックス1を使ったレイアウトを構築できます。横並びや両端揃えなど、CSSで記述が少々面倒なレイアウトをコンポーネントのみで対応できます。
Usage#
- デフォルトの
directionはrowです。子要素は横並びになります。columnに変更することで縦並びにできます wrapを有効化することで、子要素が多い場合に自動で折り返しできます。これはレスポンシブレイアウトなどで有用です。