W3C home > Mailing lists > Public > public-css-commits@w3.org > January 2012

csswg/css3-flexbox/images flex-align.svg,NONE,1.1

From: Tab Atkins Jr.. via cvs-syncmail <cvsmail@w3.org>
Date: Fri, 20 Jan 2012 23:51:22 +0000
To: public-css-commits@w3.org
Message-Id: <E1RoOEs-0005CX-P2@lionel-hutz.w3.org>
Update of /sources/public/csswg/css3-flexbox/images
In directory hutz:/tmp/cvs-serv19958/images

Added Files:
	flex-align.svg 
Log Message:
Add a diagram for flex-align

--- NEW FILE: flex-align.svg ---
<svg xmlns="http://www.w3.org/2000/svg" width='508' height='372'>
	<defs>
		<pattern id='checker' width='20' height='20' patternUnits='userSpaceOnUse'>
			<rect x='0' y='0' width='10' height='10' fill='#eee' />
			<rect x='10' y='10' width='10' height='10' fill='#eee' />
			<rect x='0' y='10' width='10' height='10' fill='#ccc' />
			<rect x='10' y='0' width='10' height='10' fill='#ccc' />
		</pattern>
	</defs>
	<style>
		.label { font-family: sans-serif; font-weight: bold; font-size: 30px; text-anchor: middle; }
		.bg { fill: url(#checker); }
		.border { stroke: black; stroke-width: 2; fill: transparent; }
		g.one > rect   { fill: #fcc; }
		g.two > rect   { fill: #cfc; }
		g.three > rect { fill: #ccf; }
		g.four > rect  { fill: #cff; }
	</style>
	<g transform="translate(2,2)">
		<rect class='bg' x='0' y='0' width='250' height='120' />
		<g class='one' transform="translate(0,0)">
			<rect width='50' height='90' />
		</g>
		<g class='two' transform="translate(50,0)">
			<rect width='40' height='60' />
		</g>
		<g class='three' transform="translate(90,0)">
			<rect width='100' height='90' />
		</g>
		<g class='four' transform="translate(190,0)">
			<rect width='60' height='120' />
		</g>
		<rect class='border' x='0' y='0' width='250' height='120' />
		<text class='label' x='125' y='68'>start</text>
	</g>
	<g transform="translate(256,2)">
		<rect class='bg' x='0' y='0' width='250' height='120' />
		<g class='one' transform="translate(0,30)">
			<rect width='50' height='90' />
		</g>
		<g class='two' transform="translate(50,60)">
			<rect width='40' height='60' />
		</g>
		<g class='three' transform="translate(90,30)">
			<rect width='100' height='90' />
		</g>
		<g class='four' transform="translate(190,0)">
			<rect width='60' height='120' />
		</g>
		<rect class='border' x='0' y='0' width='250' height='120' />
		<text class='label' x='125' y='68'>end</text>
	</g>
	<g transform="translate(2,126)">
		<rect class='bg' x='0' y='0' width='250' height='120' />
		<g class='one' transform="translate(0,15)">
			<rect width='50' height='90' />
		</g>
		<g class='two' transform="translate(50,30)">
			<rect width='40' height='60' />
		</g>
		<g class='three' transform="translate(90,15)">
			<rect width='100' height='90' />
		</g>
		<g class='four' transform="translate(190,0)">
			<rect width='60' height='120' />
		</g>
		<rect class='border' x='0' y='0' width='250' height='120' />
		<text class='label' x='125' y='68'>center</text>
	</g>
	<g transform="translate(256,126)">
		<rect class='bg' x='0' y='0' width='250' height='120' />
		<g class='one' transform="translate(0,0)">
			<rect width='50' height='120' />
		</g>
		<g class='two' transform="translate(50,0)">
			<rect width='40' height='120' />
		</g>
		<g class='three' transform="translate(90,0)">
			<rect width='100' height='120' />
		</g>
		<g class='four' transform="translate(190,0)">
			<rect width='60' height='120' />
		</g>
		<rect class='border' x='0' y='0' width='250' height='120' />
		<text class='label' x='125' y='68'>stretch</text>
	</g>
	<g transform="translate(2,250)">
		<rect class='bg' x='0' y='0' width='504' height='120' />
		<g class='one' transform="translate(0,5)">
			<rect width='101' height='100' />
			<text x='2' y='20' style="font-size: 20px;">foo foo foo</text>
		</g>
		<g class='two' transform="translate(101,10)">
			<rect width='81' height='80' />
			<text x='2' y='15' style="font-size: 15px;">foo foo foo</text>
		</g>
		<g class='three' transform="translate(182,0)">
			<rect width='201' height='100' />
			<text x='2' y='25' style="font-size: 25;">foo foo foo foo foo</text>
		</g>
		<g class='four' transform="translate(383,5)">
			<rect width='121' height='120' />
			<text x='2' y='20' style="font-size: 20px;">foo foo foo</text>
		</g>
		<rect class='border' x='0' y='0' width='504' height='120' />
		<path d="M 0 25.5 h 504" stroke="gray" stroke-width='1' stroke-dasharray="3" />
		<text class='label' x='251' y='68'>baseline</text>
	</g>
</svg>
Received on Friday, 20 January 2012 23:51:28 UTC

This archive was generated by hypermail 2.3.1 : Tuesday, 6 January 2015 20:44:49 UTC