ビュー
レイアウト
Flexbox

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'
childrenFlexboxコンポーネント内に表示するコンテンツを指定します。なし