VRule and HRule controls in Flex

The VRule and HRule controls in Flex are act as a divider(separator) in a container.

VRule control helps to draw a vertical line, this control creates a single vertical divinding line within a container.

VRule controls are defined in flex in mxml tag  

Here is the example code for VRule control.

<?xml version="1.0"?> 
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"backgroundColor="#ffffff">
<mx:Panel title="Flex-VRule Example"  fontSize="10" >
<mx:HBox>
<mx:Label text="Side Bar 1" />
<mx:VRule  strokeWidth="4" strokeColor="#8d5789"/>
<mx:Label text="Side Bar 2" />
</mx:HBox>
</mx:Panel>
</mx:Application>

The following image shows an VRule control.

HRule control helps to draw a horizontal line, this control creates a single horizontal dividing line within a container.HRule controls are defined in flex in mxml tag  

Here is the example code for HRule control.

<?xml version="1.0"?> 
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" backgroundColor="#ffffff">
<mx:Panel title="Flex-HRule Example"  fontSize="10" >
<mx:VBox verticalGap="20" horizontalAlign="center">
<mx:Label text="Top Bar " />
<mx:HRule  strokeWidth="3" strokeColor="#8d5789"/>
<mx:Label text="Bottom Bar" />
</mx:VBox>
</mx:Panel>
</mx:Application>

The following image shows an HRule control.