自动布局调整以适应不同的浏览器窗口大小

霍斯特

在Flex4 / mxml中,我有一堆元素,例如TextFields,Button或其他任何元素。我想将它们水平相邻放置。但是对于浏览器窗口或屏幕分辨率太小以至于并非所有人都适合水平放置的情况,我需要一种布局,该布局可以自动将多余的元素移到下面的行。

换句话说,我需要一个既包含水平布局又包含垂直布局的布局,而水平布局优先于垂直布局。所以实际上是一个非常简单的布局,但是我找不到解决方案。我该如何实现?

例如,以下是一个起点:

<mx:HBox horizontalGap="0" width="{width-30}" horizontalAlign="center" textAlign="center">
    <mx:Label paddingLeft="10" text="anytext1" />                
    <mx:Label id="warn12" text="anytext2" />
    <mx:Button label="Do Something1" click="{cf.doSomething(1)}"/>
    <mx:Label paddingLeft="0" text="anytext3" />
    <mx:Button label="Do Something2" click="{cf.doSomething(2)}"/>
</mx:HBox>

HBox将所有“标签”和“按钮”水平放置在一起,如果屏幕尺寸太小,则最右边的项目会超出右边的屏幕边框,但我希望它们在第二行的左侧下方显示。

另外,但不是很重要,如果屏幕尺寸大于必要尺寸,我希望标签和按钮居中。这就是horizo​​ntalAlign =“ center”和textAlign =“ center”的含义。

布赖恩

您应该能够使用一个Tile元素。如果屏幕的宽度不足以容纳所有内容,它将自动将元素换行到新行:

<mx:Tile id="myFlow" 
        direction="horizontal" width="{width-30}"
        paddingTop="0" paddingBottom="0" 
        paddingRight="0" paddingLeft="0" 
        verticalGap="0" horizontalGap="0">
    <mx:Label paddingLeft="10" text="anytext1" />                
    <mx:Label id="warn12" text="anytext2" />
    <mx:Button label="Do Something1" click="{cf.doSomething(1)}"/>
    <mx:Label paddingLeft="0" text="anytext3" />
    <mx:Button label="Do Something2" click="{cf.doSomething(2)}"/>
</mx:Tile>

本文收集自互联网,转载请注明来源。

如有侵权,请联系[email protected] 删除。

编辑于
0

我来说两句

0条评论
登录后参与评论

相关文章

来自分类Dev

如何在调整浏览器大小等时自动调整Web字体的大小

来自分类Dev

如何根据浏览器的大小调整自适应AdSense单元的大小

来自分类Dev

浏览器窗口调整大小时如何在CSS中调整梯形大小

来自分类Dev

调整浏览器窗口大小时,li元素重叠

来自分类Dev

检测何时将浏览器窗口从特定大小调整为更大大小?

来自分类Dev

调整浏览器窗口大小时,如何正确调整textarea的大小?

来自分类Dev

如何使图像自动调整大小以适合浏览器窗口的高度

来自分类Dev

调整浏览器/窗口大小时,Div的JQuery / Javascript自动调整大小

来自分类Dev

调整浏览器窗口大小并截图

来自分类Dev

CSS窗口根据浏览器高度调整大小

来自分类Dev

Twitter Bootstrap-调整浏览器窗口的大小-导致布局元素的位置

来自分类Dev

浏览器如何自动调整网站大小以进行移动浏览?

来自分类Dev

如何仅跟踪浏览器窗口调整大小

来自分类Dev

每当浏览器窗口变窄时,我应该使用什么代码自动调整图像大小?

来自分类Dev

调整浏览器大小不会显示自适应设计

来自分类Dev

如何根据浏览器窗口大小调整文本大小

来自分类Dev

调整浏览器窗口大小时,标题部分消失

来自分类Dev

在不调整浏览器窗口大小的情况下将Bootstrap 3网格布局预览为手机和平板电脑?

来自分类Dev

ZK:在(zk)小部件中添加浏览器窗口大小调整侦听器

来自分类Dev

如何通过动态更改浏览器大小来使图像自动调整大小?

来自分类Dev

浏览器调整大小时布局中断

来自分类Dev

调整浏览器窗口大小时禁用jquery插件

来自分类Dev

浏览器插件可调整窗口大小以进行浏览测试

来自分类Dev

如何相对于浏览器窗口大小调整div的大小?

来自分类Dev

如何在浏览器中使Google搜索适应窗口大小?

来自分类Dev

动态调整浏览器窗口填充画布的大小

来自分类Dev

Flexbox项目不会在浏览器的窗口调整大小时重新排序,但会在自适应模式下重新排序

来自分类Dev

网页不会适应浏览器窗口大小

来自分类Dev

为什么布局不会自动调整大小以适应 Xamarin Forms UWP 应用中的窗口?

Related 相关文章

  1. 1

    如何在调整浏览器大小等时自动调整Web字体的大小

  2. 2

    如何根据浏览器的大小调整自适应AdSense单元的大小

  3. 3

    浏览器窗口调整大小时如何在CSS中调整梯形大小

  4. 4

    调整浏览器窗口大小时,li元素重叠

  5. 5

    检测何时将浏览器窗口从特定大小调整为更大大小?

  6. 6

    调整浏览器窗口大小时,如何正确调整textarea的大小?

  7. 7

    如何使图像自动调整大小以适合浏览器窗口的高度

  8. 8

    调整浏览器/窗口大小时,Div的JQuery / Javascript自动调整大小

  9. 9

    调整浏览器窗口大小并截图

  10. 10

    CSS窗口根据浏览器高度调整大小

  11. 11

    Twitter Bootstrap-调整浏览器窗口的大小-导致布局元素的位置

  12. 12

    浏览器如何自动调整网站大小以进行移动浏览?

  13. 13

    如何仅跟踪浏览器窗口调整大小

  14. 14

    每当浏览器窗口变窄时,我应该使用什么代码自动调整图像大小?

  15. 15

    调整浏览器大小不会显示自适应设计

  16. 16

    如何根据浏览器窗口大小调整文本大小

  17. 17

    调整浏览器窗口大小时,标题部分消失

  18. 18

    在不调整浏览器窗口大小的情况下将Bootstrap 3网格布局预览为手机和平板电脑?

  19. 19

    ZK:在(zk)小部件中添加浏览器窗口大小调整侦听器

  20. 20

    如何通过动态更改浏览器大小来使图像自动调整大小?

  21. 21

    浏览器调整大小时布局中断

  22. 22

    调整浏览器窗口大小时禁用jquery插件

  23. 23

    浏览器插件可调整窗口大小以进行浏览测试

  24. 24

    如何相对于浏览器窗口大小调整div的大小?

  25. 25

    如何在浏览器中使Google搜索适应窗口大小?

  26. 26

    动态调整浏览器窗口填充画布的大小

  27. 27

    Flexbox项目不会在浏览器的窗口调整大小时重新排序,但会在自适应模式下重新排序

  28. 28

    网页不会适应浏览器窗口大小

  29. 29

    为什么布局不会自动调整大小以适应 Xamarin Forms UWP 应用中的窗口?

热门标签

归档