Flex HBox alineación

Question

Experimenté con Flex Styling, y me encontré con un problema de alineación.

Tengo dos componentes de imagen dentro de un HBox, y el HBox dentro de un Canvas, que a su vez se encuentra dentro de la aplicación principal.

<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 personalizado:

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

    } 

Bueno, como ves que dio la lona con el fondo, y un poco de transparencia.

Pero entonces hay un HBox, con 150px de ancho, y dos imágenes dentro, cada imagen es de 40x40, por lo que en este caso el HBox sería de 150x40, lo cual es bueno para lo que estoy tratando de hacer.

pero ambas imágenes son de lado a lado, y quiero que la imagen alineada a la izquierda hacia el lado izquierdo de la HBox, y la imagen de la derecha hacia el lado derecho.

He intentado text-align pero nada, mi suposición es que Flex CSS no se comporta de la misma manera que CSS se centró en HTML.

Entonces, ¿cómo puedo hacer eso?

PD: Si alguien sabe algunos buenos sitios web sobre Flex Styling, CSS Flex o Flex personalización, sería grande si me deja unas pocas eslabones de comentario.

Answer 1

Las etiquetas espaciadoras son útiles en situaciones como estas. Si inserta una entre las dos imágenes, puede empujarlas a los bordes de la HBox. Si bien establecer el ancho del espaciador al 100% parece indicar que va a ocupar todo el cuadro, este no será el caso, ya que el ancho de las imágenes se establecerá en un valor absoluto tan pronto como se haya cargado su contenido. El espaciador ocupará el 100% del ancho restante.

<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

Puede probar estos sitios web

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

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

No he tenido mucha experiencia con los estilos CSS en Flex Por lo general se acaba de decir la HBox HorizontalAlign = "izquierda", etc

No estoy seguro de que pueda alinear dos imágenes diferentes en dos direcciones diferentes dentro de la misma HBox

Recomendaría agregar dos Hbox's de 100% de altura y 50% de ancho cada uno y alinearlos por separado.