Allineamento Flex HBox

Question

Ho sperimentato con Flex Styling e mi sono imbattuto in un problema di allineamento.

Ho due componenti immagine all'interno di uno HBox e lo HBox all'interno di uno Canvas, che a sua volta si trova all'interno dell'applicazione principale.

<mx:Canvas id="Navigation" 
    horizontalCenter="0" 
    bottom="0" 
    left="0" 
    right="0" 
    visible="true" 
    height="40" 
    styleName="transparent"> 

    <mx:HBox 
     styleName="ControlContainer" 
     horizontalCenter="0" 
     width="150"> 

     <mx:Image id="left" 
      source="@Embed(source='left.png')" 
      left="0"/> 

     <mx:Image id="right" 
      source="@Embed(source='right.png')" 
      right="0"/> 
    </mx:HBox> 
</mx:Canvas> 

CSS personalizzato:

.transparent { 
     backgroundAlpha: 0.7; 
     background-color: white; 
    } 
    .ControlContainer { 

    } 

Beh, come si vede che ha dato la tela con sfondo, e un po 'di trasparenza.

Ma l'allora c'è un HBox, con 150px di larghezza, e due immagini al suo interno, ogni immagine è 40x40, quindi in questo caso la HBox sarebbe 150x40 che è bello per quello che sto cercando di fare.

Ma entrambe le immagini sono affiancate, e voglio che l'immagine a sinistra sia allineata sul lato sinistro di HBox e l'immagine a destra sul lato destro.

Ho provato text-align ma niente, la mia ipotesi è che Flex CSS non si comporta allo stesso modo dei CSS incentrati sull'HTML.

Quindi, come posso farlo?

PS: Se qualcuno conosce alcuni buoni siti web su Flex Styling, Flex o Flex CSS personalizzazione, sarebbe bello se mi lascia qualche link in commento.

Answer 1

I tag distanziatori sono utili in situazioni come queste. Se inserisci una tra le due immagini, puoi spingerle ai bordi dell'HBox. Se si imposta la larghezza del distanziale al 100% sembrerebbe indicare che occuperà l'intera scatola, questo non sarà il caso in quanto le larghezze delle immagini verranno impostate su un valore assoluto non appena il loro contenuto sarà caricato. Il distanziatore prenderà quindi il 100% della larghezza rimanente.

<mx:HBox 
      styleName="ControlContainer" 
      horizontalCenter="0" 
      width="150"> 

      <mx:Image id="left" 
        source="@Embed(source='left.png')" 
        left="0"/> 

      <mx:Spacer width="100%"/> 

      <mx:Image id="right" 
        source="@Embed(source='right.png')" 
        right="0"/> 
    </mx:HBox> 

Answer 2

Si può provare questi siti

http://www.adobe.com/devnet/flex/quickstart/styling_components/

http://www.loscavio.com/downloads/blog/flex3_css_list/flex3_css_list.htm

non ho avuto molta esperienza con stile CSS in Flex Io di solito basta dire al HBox HorizontalAlign = "sinistra", ecc

Non sono sicuro che sarete in grado di allineare due immagini diverse in due direzioni diverse all'interno della stessa HBox

Si consiglia di aggiungere due Hbox con altezza del 100% e larghezza del 50% ciascuna e allinearli separatamente.