The vbox and hbox are components which align their enclosed children components both vertically or horizontally.
For more details, please refer to our Component Reference - Box

<zk xmlns:n="native">
	<zscript><![CDATA[
	Map map = new LinkedHashMap();
	String[] packs = new String[] { "", "start", "center", "end" };
	String[] aligns = new String[] { "", "stretch", "start", "center", "end" };
	for (int i = 0; i < aligns.length; i++) {
		String align = aligns[i];
		List list = new ArrayList();
		for (int j = 0; j < packs.length; j++) {
			list.add(packs[j]);
		}
		map.put(align, list);
	}
]]></zscript>
	<hlayout>
		<tablelayout columns="6">
			<tablechildren>
				<panel border="normal" height="100px" width="100px" style="margin-top:3px;" forEach='"pack \\ align", "", "start", "center", "end"'>
					<panelchildren>
						<vbox align="center" pack="center" height="90%" width="100%">
							<n:h3>${each}</n:h3>
						</vbox>
					</panelchildren>
				</panel>
			</tablechildren>
			<tablechildren forEach="${map}">
				<variables key="${each.key}" />
				<panel border="normal" height="100px" width="100px" style="margin-top:3px;">
					<panelchildren>
						<vbox align="center" pack="center" height="90%" width="100%">
							<n:h3>${key}</n:h3>
						</vbox>
					</panelchildren>
				</panel>
				<panel border="normal" height="100px" width="100px" forEach="${each.value}" style="margin-top:3px;">
					<panelchildren>
						<vbox align="${key}" pack="${each}" height="100%" width="100%">
							<button label="Test">
								<attribute name="onClick"><![CDATA[
									Vbox vb = self.getParent();
									pack.setValue(vb.getPack());
									align.setValue(vb.getAlign());
								]]></attribute>
							</button>
						</vbox>
					</panelchildren>
				</panel>
			</tablechildren>
		</tablelayout>
		<vlayout>
			<hlayout>
				Pack =
				<label id="pack" />
			</hlayout>
			<hlayout>
				Align =
				<label id="align" />
			</hlayout>
		</vlayout>
	</hlayout>
</zk>