HStack

使用法

HStack は内部のすべてをレンダリングできます。

import {
   __experimentalHStack as HStack,
   __experimentalText as Text,
} from '@wordpress/components';
function Example() {
   return (
   <HStack>
   <Text>Code</Text>
   <Text>is</Text>
   <Text>Poetry</Text>
   </HStack>
   );
}

プロパティ

整列

タイプ: HStackAlignment | CSS[ 'alignItems' ]

子要素の整列方法を決定します。

• top: コンテンツを上部に整列します。
• topLeft: コンテンツを上部/左に整列します。
• topRight: コンテンツを上部/右に整列します。
• left: コンテンツを左に整列します。
• center: コンテンツを中央に整列します。
• right: コンテンツを右に整列します。
• bottom: コンテンツを下部に整列します。
• bottomLeft: コンテンツを下部/左に整列します。
• bottomRight: コンテンツを下部/右に整列します。
• edge: コンテンツをコンテナの主軸の端まで均等に広げます。
• stretch: コンテンツをコンテナの交差軸の端まで引き伸ばします。
  

方向

タイプ: FlexDirection

子要素の流れの方向は direction で調整できます。 column は子要素を垂直に整列し、row は子要素を水平方向に整列します。

拡張

タイプ: boolean

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

整列

タイプ: CSS['justifyContent']

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

下の例では、flex-start が子要素のコンテンツを左に整列します。

間隔

タイプ: CSS['width']

各子要素間のスペースの量。 各子要素間の間隔は spacing を使用して調整できます。

spacing の値はライブラリのグリッドシステム（4px のベース）に対する乗数として機能します。

ラップ

タイプ: boolean

子要素がラップするかどうかを決定します。

スペーサー

Spacer が HStack 内で使用されると、Spacer は残りのスペースを取るために適応的に拡張します。

import {
   __experimentalHStack as HStack,
   __experimentalSpacer as Spacer,
   __experimentalText as Text,
} from '@wordpress/components';
function Example() {
   return (
   <HStack>
   <Text>Code</Text>
   <Spacer>
   <Text>is</Text>
   </Spacer>
   <Text>Poetry</Text>
   </HStack>
   );
}

Spacer はアイテムの間に使用して、それらを離すこともできます。

import {
   __experimentalHStack as HStack,
   __experimentalSpacer as Spacer,
   __experimentalText as Text,
} from '@wordpress/components';
function Example() {
   return (
   <HStack>
   <Text>Code</Text>
   <Spacer />
   <Text>is</Text>
   <Text>Poetry</Text>
   </HStack>
   );
}