Positioning text in Flex

Question

I want to display three different pieces of text in a line underneath a VBox so I've created a HBox and place the Text components in here:

<mx:HBox width="100%">
    <mx:Text text="left" id="textLeft"/>
    <mx:Text text="center" id="textCenter"/>
    <mx:Text text="right" id="textRight"/>
</mx:HBox>

I want the text with id "textLeft" to be positioned on the very left on the HBox and textCenter to be in the center and textRight to be on the right...

Any solutions/pointers appreciated.

Answer 1

try

<mx:HBox width="100%">
    <mx:Text text="left" id="textLeft"/>
    <mx:Spacer width="100%" />
    <mx:Text text="center" id="textCenter"/>
    <mx:Spacer width="100%" />
    <mx:Text text="right" id="textRight"/>
</mx:HBox>

or

   <mx:HBox width="100%">
        <mx:Text text="left" id="textLeft" textAlign="left" width="100%"/>
        <mx:Text text="center" id="textCenter"  textAlign="center" width="100%"/>
        <mx:Text text="right" id="textRight"  textAlign="right" width="100%"/>
   </mx:HBox>

Personally I'd go with the top one

Answer 2

Thanks for your response. In the meantime I came up with this solution with help from a friend.

Using a grid:

<mx:Grid width="100%">
   <mx:GridRow width="100%" height="100%">
      <mx:GridItem width="33%" height="100%" horizontalAlign="left">
          <mx:Text text="left" id="textLeft"/>
      </mx:GridItem>
      <mx:GridItem width="33%" height="100%" horizontalAlign="center">
          <mx:Text text="center" id="textCenter"/>
      </mx:GridItem>
      <mx:GridItem width="33%" height="100%" horizontalAlign="right">
          <mx:Text text="right" id="textRight"/>
      </mx:GridItem>          
   </mx:GridRow>
</mx:Grid>

However I do see that your solution is better for more things being added.