Flex

フレキシブルレイアウトを作成するためのコンポーネント。

ソースを表示問題を報告

<Flex gap="3">
  <Box width="64px" height="64px">
    <DecorativeBox />
  </Box>
  <Box width="64px" height="64px">
    <DecorativeBox />
  </Box>
  <Box width="64px" height="64px">
    <DecorativeBox />
  </Box>
  <Box width="64px" height="64px">
    <DecorativeBox />
  </Box>
  <Box width="64px" height="64px">
    <DecorativeBox />
  </Box>
</Flex>

API リファレンス

このコンポーネントは div 要素に基づいており、共通のマージンプロパティをサポートしています。

これらのプロパティを使用してフレキシブルレイアウトを作成します。

プロパティ	型	デフォルト
`as`	`"div" \| "span"`	`"div"`
`asChild`	`boolean`	デフォルト値なし
`display`	`レスポンシブ<"none" \| "inline-flex" \| "flex">`	デフォルト値なし
`direction`	`レスポンシブ<enum>`	デフォルト値なし
`align`	`レスポンシブ<enum>`	デフォルト値なし
`justify`	`レスポンシブ<"start" \| "center" \| "end" \| "between">`	デフォルト値なし
`wrap`	`レスポンシブ<"nowrap" \| "wrap" \| "wrap-reverse">`	デフォルト値なし
`gap`	`レスポンシブ<enum \| string>`	デフォルト値なし
`gapX`	`レスポンシブ<enum \| string>`	デフォルト値なし
`gapY`	`レスポンシブ<enum \| string>`	デフォルト値なし

以下のプロパティは、Box、Flex、Grid、Container、Sectionコンポーネントで共有されています。レイアウトでレイアウトコンポーネントの詳細をご覧ください。

プロパティ	型	デフォルト
`p`	`レスポンシブ<enum \| string>`	デフォルト値なし
`px`	`レスポンシブ<enum \| string>`	デフォルト値なし
`py`	`レスポンシブ<enum \| string>`	デフォルト値なし
`pt`	`レスポンシブ<enum \| string>`	デフォルト値なし
`pr`	`レスポンシブ<enum \| string>`	デフォルト値なし
`pb`	`レスポンシブ<enum \| string>`	デフォルト値なし
`pl`	`レスポンシブ<enum \| string>`	デフォルト値なし
`width`	`レスポンシブ<string>`	デフォルト値なし
`minWidth`	`レスポンシブ<string>`	デフォルト値なし
`maxWidth`	`レスポンシブ<string>`	デフォルト値なし
`height`	`レスポンシブ<string>`	デフォルト値なし
`minHeight`	`レスポンシブ<string>`	デフォルト値なし
`maxHeight`	`レスポンシブ<string>`	デフォルト値なし
`position`	`レスポンシブ<enum>`	デフォルト値なし
`inset`	`レスポンシブ<enum \| string>`	デフォルト値なし
`top`	`レスポンシブ<enum \| string>`	デフォルト値なし
`right`	`レスポンシブ<enum \| string>`	デフォルト値なし
`bottom`	`レスポンシブ<enum \| string>`	デフォルト値なし
`left`	`レスポンシブ<enum \| string>`	デフォルト値なし
`overflow`	`レスポンシブ<enum>`	デフォルト値なし
`overflowX`	`レスポンシブ<enum>`	デフォルト値なし
`overflowY`	`レスポンシブ<enum>`	デフォルト値なし
`flexBasis`	`レスポンシブ<string>`	デフォルト値なし
`flexShrink`	`レスポンシブ<enum \| string>`	デフォルト値なし
`flexGrow`	`レスポンシブ<enum \| string>`	デフォルト値なし
`gridArea`	`レスポンシブ<string>`	デフォルト値なし
`gridColumn`	`レスポンシブ<string>`	デフォルト値なし
`gridColumnStart`	`レスポンシブ<string>`	デフォルト値なし
`gridColumnEnd`	`レスポンシブ<string>`	デフォルト値なし
`gridRow`	`レスポンシブ<string>`	デフォルト値なし
`gridRowStart`	`レスポンシブ<string>`	デフォルト値なし
`gridRowEnd`	`レスポンシブ<string>`	デフォルト値なし

前へBox

次へGrid

GitHubでこのページを編集する。

概要

テーマ

レイアウト

タイポグラフィ

コンポーネント

ユーティリティ

Flex

API リファレンス