使用法

Flex は、その2つのサブコンポーネント、FlexItem と FlexBlock のいずれかと一緒に使用されます。 

  1. import { Flex, FlexBlock, FlexItem } from '@wordpress/components';
  3. function Example() {
  4.    return (
  5.    <Flex>
  6.    <FlexItem>
  7.    <p>Code</p>
  8.    </FlexItem>
  9.    <FlexBlock>
  10.    <p>Poetry</p>
  11.    </FlexBlock>
  12.    </Flex>
  13.    );
  14. }

プロパティ

align: CSSProperties[‘alignItems’]

CSS Flexbox align-items を使用して子要素を整列させます。 direction が row の場合はコンテンツを垂直に整列させ、direction が column の場合はコンテンツを水平方向に整列させます。

  • 必須: いいえ
  • デフォルト: center

direction: ResponsiveCSSValue<CSSProperties[‘flexDirection’]>

子要素のコンテンツの流れの方向は direction で調整できます。 column は子要素を垂直に整列させ、row は子要素を水平方向に整列させます。

  • 必須: いいえ
  • デフォルト: row

expanded: boolean

最大の利用可能な幅（横の場合）または高さ（縦の場合）に拡張します。

  • 必須: いいえ
  • デフォルト: true

gap: number

各子要素の間のスペースは gap を使用して調整できます。 gap の値はライブラリのグリッドシステム（4px の基準）に対する倍率として機能します。

  • 必須: いいえ
  • デフォルト: 2

justify: CSSProperties[‘justifyContent’]

direction が row の場合はコンテンツを水平方向に整列させ、direction が column の場合はコンテンツを垂直に整列させます。

  • 必須: いいえ
  • デフォルト: space-between

wrap: boolean

子要素が折り返すべきかどうかを決定します。

  • 必須: いいえ
  • デフォルト: false