FlexBox布局示例-优快云博客

本文通过实例演示了FlexBox布局容器的应用方式，包括垂直和水平排列的子元素，展示了如何利用Box容器进行灵活布局。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<?xml version="1.0"?>
<!-- Simple example to demonstrate the Box layout container. -->
<!--
	如何使用Flex Box
	MyShareBook.cn 翻译
-->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml">

    <mx:Panel title="Box Container Example" height="75%" width="75%" 
        paddingTop="10" paddingLeft="10" paddingRight="10" paddingBottom="10">

        <mx:Label width="100%" color="blue"
            text="A Box container with vertically aligned children."/>
        <mx:Box direction="vertical" borderStyle="solid" 
                paddingTop="10" paddingBottom="10" paddingLeft="10" paddingRight="10">
            <mx:Button label="Button 1"/>
            <mx:Button label="Button 2"/>
            <mx:Button label="Button 3"/>
            <mx:ComboBox/>
        </mx:Box>

        <mx:Label width="100%" color="blue"
            text="A Box container with horizontally aligned children."/>
        <mx:Box direction="horizontal" borderStyle="solid" 
                paddingTop="10" paddingBottom="10" paddingLeft="10" paddingRight="10">
            <mx:Button label="Button 1"/>
            <mx:Button label="Button 2"/>
            <mx:Button label="Button 3"/>
            <mx:ComboBox/>
        </mx:Box>

    </mx:Panel>
</mx:Application>