The default space between components in a horizontal divided box is 10 pixels. When looking at the properties for the divided box, we might suspect the property dividerThickness is what we are looking for. But it is not. This property sets the thickness of the divider as we move the divider.
As it turns out we need to change the horizontalGap property of the divided box. This will make the space between the components larger or smaller. In the following example we can the effect of the value for the horizontalGap property.
<?xml version="1.0" encoding="UTF-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
backgroundColor="0xCCCCCC" layout="vertical" verticalAlign="middle">
<mx:HDividedBox backgroundColor="0xFFFFFF" horizontalGap="{slider.value}"
width="90%" height="90%">
<mx:Canvas width="30%" height="100%" backgroundColor="0xB3DCE6">
<mx:Label text="Canvas one"/>
</mx:Canvas>
<mx:Canvas width="70%" height="100%" backgroundColor="0xCFF6FF">
<mx:Label text="Canvas two"/>
</mx:Canvas>
</mx:HDividedBox>
<mx:ApplicationControlBar dock="true">
<mx:Label text="horizontalGap:"/>
<mx:HSlider id="slider" value="10" maximum="20" liveDragging="true"
tickInterval="1" snapInterval="1"/>
</mx:ApplicationControlBar>
</mx:Application>
