display: flexのラッパーコンポーネント

Example#

Props#

NameTypeDefaultDescription
askeyof HTMLElementTagNameMap | ReactElement<ComponentType<FC<PropsWithoutText | PropsWithTextBody | PropsWithTextNote>>, 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"rowdirection 重ねる向き
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` を使うこと
wrapbooleanfalse折り返しの有無
height
optional
"full"-親要素に対し、100%としたい場合に使用
width
optional
"full"-デフォルト<Flex>は横幅いっぱいを専有する。しかし例えば、フレックスコンテナの子要素として配置した場合、横幅が自身の子に合わせて小さくなる。これが不都合の場合に100%とする事が可能
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
data-*
optional
string-Custom data attributes

Feature#

フレックスボックス1を使ったレイアウトを構築できます。横並びや両端揃えなど、CSSで記述が少々面倒なレイアウトをコンポーネントのみで対応できます。

Usage#

  • デフォルトのdirectionrowです。子要素は横並びになります。columnに変更することで縦並びにできます
  • wrapを有効化することで、子要素が多い場合に自動で折り返しできます。これはレスポンシブレイアウトなどで有用です。

Footnotes#

  1. フレックスボックスの基本概念 - CSS: カスケーディングスタイルシート | MDN