Flex のコントロールは、共通のクラス階層を共有しています。したがって、すべてのコントロールは同様の手順で設定することができます。

コントロールのクラス階層

次の例に示したように、Flex のコントロールは、flash.display.Sprite クラスと mx.core.UIComponent クラスから派生した ActionScript オブジェクトです。コントロールは、それらのスーパークラスのプロパティ、メソッド、イベント、スタイル、エフェクトを継承します。

Sprite クラスと UIComponent クラスは、すべての Flex コンポーネントの基本クラスです。UIComponent クラスのサブクラスは形状を持つことができ、それ自体を表示することも非表示にすることもできます。各サブクラスはタブ順序の管理に対応し、低レベルのイベント（キーボードやマウスによる入力など）を受け付けます。また、キーボードやマウスによる入力を受け付けないように無効にすることができます。

コントロールが Sprite クラスと UIComponent クラスから継承したインターフェイスについて詳しくは、Flex ビジュアルコンポーネントの使用を参照してください。

コントロールのサイズ設定

すべてのコントロールには、Flex アプリケーションにおけるサイズを決定するための規則が定義されています。例えば、Button コントロールの場合は、ラベルテキストとオプションのアイコンイメージを表示できるようなサイズが基準になります。同様に、Image コントロールの場合は、読み込むイメージの大きさに合わせてサイズが計算されます。各コントロールには、デフォルトの高さと幅があります。各標準コントロールのデフォルトサイズについては、各コントロールの説明を参照してください。

コントロールのデフォルトサイズは、固定値とは限りません。例えば、Button コントロールの場合は、ラベルテキストとオプションのアイコンイメージを表示できるだけの大きさがデフォルトサイズになります。Flex は、実行時に各コントロールのデフォルトサイズを計算します。デフォルトでは、コントロールのサイズがデフォルトサイズから変更されることはありません。

MXML で height 属性や width 属性を 50％などのパーセントに設定するか、ActionScript で percentHeight プロパティや percentWidth プロパティを 50 などのパーセント値に設定すると、Flex では対応する方向に関してコントロールのサイズが調整されます。Flex は、親コンテナに対するパーセント値として指定されたサイズにコントロールのサイズを合わせようと試みます。コントロールに対して割り当てるだけの十分な領域が存在しない場合、指定された比率は維持しながら、残された領域が比例配分されます。

次のようにして、コメントボックスの幅を親コンテナのサイズ変化に合わせて拡大 / 縮小させることも可能です。

<mx:TextInput id="comments" width="100%" height ="20"/> 

また、コントロールのサイズを明示的に指定することもできます。この場合は、コントロールの height プロパティと width プロパティをピクセル数値に設定します。次の例は、addr2 TextInput コントロールの高さと幅をそれぞれ 20 ピクセルと 100 ピクセルに設定しています。

<mx:TextInput id="addr2" width="100" height ="20"/>

コントロールのサイズを実行時に変更するには、ActionScript を使用して width プロパティと height プロパティを設定します。例えば、次の例では、Button コントロールのクリックイベントリスナーで、addr2 TextInput コントロールの width プロパティについて、幅を 10 ピクセル分増やしています。

<mx:Button id="button1" label="Slide" height="20" 
    click="addr2.width+=10;"/> 

多くのコンポーネントは最大サイズが任意の大きさに設定されています。つまり、アプリケーションの要件に合わせて、どのような大きさでも適用できるという意味です。ゼロ以外の最小サイズが定義されたコンポーネントも一部存在しますが、ほとんどのコンポーネントでは最小サイズが 0 として定義されています。maxHeight、maxWidth、minHeight、minWidth の各プロパティを使用して、各コンポーネントのサイズ変更範囲を明示的に設定できます。

コンポーネントのサイズ変更について詳しくは、コンポーネントのサイズ設定と配置を参照してください。

コントロールの配置

コントロールはコンテナ内に配置します。ほとんどのコンテナには、自動的に子の位置を決定するレイアウト規則があらかじめ定義されています。Canvas コンテナではその子に絶対位置が指定されますが、Application コンテナと Panel コンテナでは、オプションで絶対位置とコンテナに対する相対位置を使用できます。

コントロールの絶対位置を指定するには、x プロパティと y プロパティに、コンテナ内での水平座標と垂直座標をピクセル単位で設定します。この座標は、コンテナの左上隅を（0,0）とする相対位置になります。x と y には、正負の整数を指定できます。例えば、負数を指定することによってコントロールをコンテナの表示領域外に配置しておき、ActionScript を使用して、イベントに対する応答として子を表示領域に移動するようなことも可能です。

次の例では、Canvas コンテナの左上隅を基準とし、TextInput コントロールを 150 ピクセル右、150 ピクセル下の位置に配置しています。

<mx:TextInput id="addr2" width="100" height ="20" x="150" y="150"/>

絶対位置が指定されたコンテナに配置されたコントロールを実行時に移動するには、コントロールの x プロパティと y プロパティを使用します。例えば、次の Button コントロールの click イベントリスナーは、TextInput コントロールを現在の位置から 10 ピクセル下に移動しています。

<mx:Button id="button1" label="Slide" height="20" x="0" y="250"click="addr2.y = addr2.y+10;"/> 

コンテナを基準にした配置を含め、コントロールの配置について詳しくは、コンポーネントのサイズ設定と配置を参照してください。

コントロールの外観の変更

コントロールの外観は、スタイル、スキンおよびフォントを使用してカスタマイズできます。これらは、コンポーネントに共通して適用させる特性を定義するものです。各コントロールには、設定可能な一連のスタイル、スキン、フォントが定義されています。特定のコントロールタイプに固有のものと、様々なコントロールで汎用的に使用されるものとがあります。

Flex では、様々な方法でコントロールの外観を設定できます。例えば、コントロールの MXML タグまたは ActionScript を使用して特定のコントロールに対してのみスタイルを設定できる場合と、<mx:Style> タグを使用してアプリケーションの特定のコントロールのすべてのインスタンスに対してグローバルにスタイルを設定できる場合とがあります。

テーマは、Flex アプリケーションの外観と操作性を定義します。テーマには、アプリケーションのカラースキーマや共通フォントなどの単純なものから、全 Flex コンポーネントの完全な再スキンのような複雑なものまで定義できます。コントロールに対して設定できるスタイルは、そのアプリケーションの現在のテーマによって定義されます。したがって、スタイルのプロパティは必ずしも設定できるとは限りません。詳しくは、スタイルとテーマの使用を参照してください。