Box Container

<?xml version="1.0" encoding="utf-8"?>

<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" backgroundGradientAlphas="[1.0, 1.0]" backgroundGradientColors="[#874040, #874040]">          

     <mx:TabNavigator x="10" y="43" width="650" height="303">

          <mx:Canvas label="VBOX" width="50%" height="100%">

               <mx:Panel title="VBox Container" layout="vertical" color="#100F0F" borderAlpha="0.15"

                   paddingTop="10" paddingRight="10" paddingBottom="10" paddingLeft="10" horizontalAlign="center" x="10" y="10" borderColor="#0B0808" backgroundColor="#F1F5B8">

                  

                   <mx:Label width="100%" color="0x323232" textAlign="center"

                     text="An VBox container with vertically aligned children."/>

                    

                   <mx:VBox borderStyle="solid" paddingTop="10" paddingBottom="10"

                         paddingLeft="10" paddingRight="10" color="0x707070">

                     

                      <mx:Button label="Button 1"/>

                      <mx:Button label="Button 2"/>

                      <mx:Button label="Button 3"/>

                      <mx:ComboBox />

                  

                   </mx:VBox>

                 

               </mx:Panel>

          </mx:Canvas>

          <mx:Canvas label="HBOX" width="100%" height="100%">

               <mx:Panel title="HBox Container" layout="vertical" color="#000000" borderAlpha="0.15"

                       paddingTop="10" paddingRight="10" paddingBottom="10" paddingLeft="10" horizontalAlign="center" x="10" y="10" borderColor="#EF3E3E" backgroundColor="#C6E5E1">

                        

                         <mx:Label width="100%" color="0x323232" textAlign="center"

                         text="An HBox container with horizontally aligned children."/>

                        

                       <mx:HBox borderStyle="solid" paddingTop="10" paddingBottom="10"

                             paddingLeft="10" paddingRight="10" color="0x707070">

                         

                          <mx:Button label="Button 1"/>

                          <mx:Button label="Button 2"/>

                          <mx:Button label="Button 3"/>

                          <mx:ComboBox />

                      

                       </mx:HBox>

                     

                  </mx:Panel>

          </mx:Canvas>

          <mx:Canvas label="V_DIV_BOX" width="100%" height="100%">

           <mx:Panel title="VDividedBox Container" layout="vertical" color="#0E0D0D" borderAlpha="0.15" width="500" height="240"

         paddingTop="10" paddingRight="10" paddingBottom="10" paddingLeft="10" horizontalAlign="center" x="10" y="10" backgroundColor="#C1F7B6" borderColor="#746060">

        

         <mx:Text width="100%" color="0x323232" textAlign="center"

            text="Drag the divider up and down to resize the children."/>

        <mx:VDividedBox width="100%" height="100%">

            <mx:Canvas label="Canvas 1" width="100%" height="100%" color="0x323232" backgroundColor="#ACACAC">

                <mx:Label text="Add components here" fontWeight="bold" textAlign="center" width="100%"/>

            </mx:Canvas>

            <mx:Canvas label="Canvas 2" width="100%" height="100%" backgroundColor="#323232" >

                <mx:Label text="Add components here" fontWeight="bold" textAlign="center" width="100%" color="#FAF5F5"/>

            </mx:Canvas>

        </mx:VDividedBox>

       

    </mx:Panel>

          </mx:Canvas>

          <mx:Canvas label="H_DIV_BOX" width="100%" height="100%">

           <mx:Panel title="HDividedBox Container" layout="vertical" color="#0C0B0B" borderAlpha="0.15" width="500" height="240"

         paddingTop="10" paddingRight="10" paddingBottom="10" paddingLeft="10" horizontalAlign="center" x="41" y="10" borderColor="#C70C0C" backgroundColor="#C7F5F3">

          

         <mx:Text width="100%" color="0x323232" textAlign="center"

            text="Drag the divider side to side to resize the children."/>

        <mx:HDividedBox width="100%" height="100%">

            <mx:Canvas label="Canvas 1" width="100%" height="100%" color="0x323232" backgroundColor="#ACACAC">

                <mx:Label text="Add components here" fontWeight="bold" textAlign="center" width="100%"/>

            </mx:Canvas>

            <mx:Canvas label="Canvas 2" width="100%" height="100%" backgroundColor="#323232" >

                <mx:Label text="Add components here" fontWeight="bold" textAlign="center" width="100%" color="#FFFEFE"/>

            </mx:Canvas>

        </mx:HDividedBox>

       

    </mx:Panel>

          </mx:Canvas>

     </mx:TabNavigator>

</mx:Application>