css-flexbox/images/multiline-flex.svg

<svg xmlns="http://www.w3.org/2000/svg" width="300" height="89" viewBox="0 0 300 89">
	<style>
		svg > rect { fill: #444; }
		.item > rect { fill: #888; }
		.item > text { font-family: sans-serif; font-size: 30px; text-anchor: middle; fill: white; }
	</style>
	<rect x='0' y='0' width='300' height='89' rx='6' ry='6'/>
	<g class='item' transform="translate(3,3)">
		<rect x='0' y='0' width='96' height='40' rx='3' ry='3' />
		<text x='48' y='32'>1</text>
	</g>
	<g class='item' transform="translate(102,3)">
		<rect x='0' y='0' width='96' height='40' rx='3' ry='3' />
		<text x='48' y='32'>2</text>
	</g>
	<g class='item' transform="translate(201,3)">
		<rect x='0' y='0' width='96' height='40' rx='3' ry='3' />
		<text x='48' y='32'>3</text>
	</g>
	<g class='item' transform="translate(3,46)">
		<rect x='0' y='0' width='294' height='40' rx='3' ry='3' />
		<text x='147' y='32'>4</text>
	</g>
</svg>