サイジング (Sizing)
size、minSize、maxSize を使用して寸法を制御します。
一般的なプロパティ
size：メインサイズminSize：最小サイズmaxSize：最大サイズ
Loading Preview…
幅と高さ (Width and Height)
要素の正確な寸法を制御します。
size、minSize、maxSize を使用して、要素の寸法の境界を設定します。
プロパティ (Properties)
これらのプロパティは width と height を含む Size オブジェクトを受け取ります。
| プロパティ | 説明 |
|---|---|
size | 理想サイズ。auto の場合、サイズはコンテンツまたは flex/grid ルールによって決定されます。 |
minSize | 最小サイズ。アイテムがこの値以下に縮小するのを防ぎます。 |
maxSize | 最大サイズ。アイテムがこの値以上に成長するのを防ぎます。 |
寸法値 (Dimension Values)
width と height プロパティは特定の値の型を受け取ります：
| 値 | 説明 | 例 (JS) |
|---|---|---|
| Auto | コンテンツに合わせたサイズ（一部の flex ケースではストレッチ）。 | "auto" |
| Points | 正確なピクセル値。 | 150 |
| Percent | レイアウトの包含領域に対する割合。 | "50%" |
size、minSize、maxSize と各幅・高さプロパティは、数値、パーセント文字列、"auto" を取ります。数値 0.5 は 0.5 ピクセルで、50 パーセントは "50%" と指定します。
boxSizing のデフォルトは BoxSizing.BorderBox です。BoxSizing.ContentBox を指定すると、スタイル寸法に padding と border を足したものが最終的なボーダーボックスになります。最小・最大の指定が矛盾する場合は最小サイズが優先され、ボックスは padding と border の合計より小さくなりません。
例 (Example)
Loading Preview…
Flex との相互作用
flexGrowはsizeを超えて拡張できるflexShrinkはスペースが狭い場合に縮小