Flexbox

Flexboxコンポーネントは、フレキシブルボックスレイアウトを実現するためのコンテナです。方向、配置、アイテムの並び方、折り返し、オーバーフロー、幅、高さを設定できます。

基本的な使い方

<Flexbox
  direction="row"
  justify="center"
  align="center"
  items="center"
  wrap="wrap"
>
  <Card>ここにコンテンツが表示されます。</Card>
  <Card>ここにもコンテンツが表示されます。</Card>
</Flexbox>

詳細なインターフェース

名前	説明	デフォルト値
direction	フレックスボックスの方向を指定します。'row' または 'col' のいずれかを指定できます。	'row'
justify	コンテンツの水平方向の配置を指定します。'start', 'end', 'center', 'between' のいずれかを指定できます。	'start'
align	コンテンツの垂直方向の配置を指定します。'start', 'end', 'center', 'between' のいずれかを指定できます。	'start'
items	アイテムの配置を指定します。'start', 'end', 'center' のいずれかを指定できます。	'start'
wrap	折り返しの設定を指定します。'wrap', 'nowrap', 'wrap-reverse' のいずれかを指定できます。	'wrap'
overflow	オーバーフローを制御するためのプロパティです。	'visible'
width	幅を制御するためのプロパティです。'auto', 'full', 'xs', 'sm', 'md', 'lg', 'xl', '2xl' のいずれかを指定できます。	'auto'
height	高さを制御するためのプロパティです。'auto', 'full', 'xs', 'sm', 'md', 'lg', 'xl', '2xl' のいずれかを指定できます。	'auto'
children	Flexboxコンポーネント内に表示するコンテンツを指定します。	なし

Grid HStack / VStack