Flex HBox выравнивание - PullRequest
Новая
       21

Flex HBox выравнивание

6 голосов
/ 12 ноября 2009

Я экспериментировал со Flex Styling, и я столкнулся с проблемой выравнивания.

У меня есть два компонента изображения внутри HBox и HBox внутри Canvas, который, в свою очередь, находится внутри основного приложения. 

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

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

    }

Ну, как вы видите, я дал холст с фоном и немного прозрачности.

Но тогда есть HBox с шириной 150px и двумя изображениями внутри, каждое изображение имеет размер 40x40, поэтому в этом случае HBox будет иметь значение 150x40, что хорошо для того, что я пытаюсь сделать .

Но оба изображения расположены рядом, и я хочу, чтобы левое изображение было выровнено по левой стороне HBox, а правое - по правой стороне.

Я пробовал text-align, но ничего, я думаю, что Flex CSS не ведет себя так же, как CSS, ориентированный на HTML.

Так как я могу это сделать?

PS: если кто-то знает хорошие сайты о Flex Styling, Flex CSS или Flex настройка, было бы здорово, если вы оставьте мне несколько ссылок в комментарии.

Ответы [ 2 ]

9 голосов
/ 12 ноября 2009

Теги Spacer полезны в подобных ситуациях. Если вы вставите одно изображение между двумя изображениями, вы можете подтолкнуть их к краям HBox. Хотя установка ширины разделителя на 100% может показаться, что он займет весь блок, это не будет иметь место, поскольку ширина изображений будет установлена ​​в абсолютное значение, как только их содержимое загрузится. Затем проставка займет 100% оставшейся ширины. 

    <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>
3 голосов
/ 12 ноября 2009

Вы можете попробовать эти сайты

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

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

У меня не было большого опыта в CSS Styling во Flex, я бы просто сказал HBox HorizontalAlign = "left" и т.д.

Я не уверен, что вы сможете выровнять два разных изображения в двух разных направлениях внутри одного и того же HBox

Я бы порекомендовал добавить два Hbox с высотой 100% и шириной 50% каждый и выровнять их отдельно.

...