The v/hlayout component gives ZK developers the flexibility to control the layout of dynamic content.Not like v/hbox, v/hlayout has simplified api and faster rendering time.
For more details, please refer to our Component Reference - Vlayout and Hlayout

<zk>
	<hlayout>
		<vlayout id="mainvlayout" spacing="10px">
			This is the first block of hlayout
			<button label="Button 1-0"></button>
			<hlayout>
				<button label="Button 2-0"></button>
				<button label="Button 2-1"></button>
			</hlayout>
			<button label="Button 3-0"></button>
			<button label="Button 4-0"></button>
			<hlayout>
				<button label="Button 5-0"></button>
				<button label="Button 5-1"></button>
				<button label="Button 5-2"></button>
			</hlayout>
			<hlayout id="customize" sclass="z-valign-top">
				<button label="Button 6-0"></button>
				<vlayout>
					<button label="Button 6-1-1"></button>
					<button label="Button 6-1-2"></button>
					<button label="Button 6-1-3"></button>
				</vlayout>
				<button label="Button 6-2"></button>
				<vlayout>
					<button label="Button 6-3-1"></button>
					<button label="Button 6-3-2"></button>
					<button label="Button 6-3-3"></button>
				</vlayout>
			</hlayout>
		</vlayout>
		<label value="This is the second block of hlayout" hflex="true" />
	</hlayout>
</zk>

<zk>
	<groupbox closable="false" sclass="z-demo-config">
		<caption label="Vertical Align" />
		<radiogroup>
			<attribute name="onCheck"><![CDATA[
				customize.setSclass(self.getSelectedItem().getValue());
			]]></attribute>
			<vlayout>
				<radio label="Top (Default)" value="z-valign-top" selected="true" />
				<radio label="Middle" value="z-valign-middle" />
				<radio label="Bottom" value="z-valign-bottom" />
			</vlayout>
		</radiogroup>
	</groupbox>
	<groupbox closable="false" sclass="z-demo-config">
		<caption label="Spacing" />
		<radiogroup>
			<attribute name="onCheck"><![CDATA[
				mainvlayout.setSpacing(self.getSelectedItem().getValue()+"px");
			]]></attribute>
			<vlayout>
				Default: 3 px
				<radio label="0" value="0"  />
				<radio label="10" value="10" selected="true" />
				<radio label="20" value="20" />
			</vlayout>
		</radiogroup>
	</groupbox>
</zk>