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