Flexbox: 7 pictures

dabblet.css

/**
 * Flexbox: 7 pictures
 */

figure
{
	display: flex;
	align-items: center;
	margin: 0;
}

img:nth-child(1),
img:nth-child(7)
{
	width: calc(100/1082 * 100%);
}

img:nth-child(2),
img:nth-child(6)
{
	width: calc(132/1082 * 100%);
}

img:nth-child(3),
img:nth-child(5)
{
	width: calc(184/1082 * 100%);
}

img:nth-child(4)
{
	width: calc(250/1082 * 100%);
}

dabblet.html

<figure>
	<img src="http://placehold.it/100x100" alt=""/>
	<img src="http://placehold.it/100x100" alt=""/>
	<img src="http://placehold.it/100x100" alt=""/>
	<img src="http://placehold.it/100x100" alt=""/>
	<img src="http://placehold.it/100x100" alt=""/>
	<img src="http://placehold.it/100x100" alt=""/>
	<img src="http://placehold.it/100x100" alt=""/>
</figure>

dabblet.js

// alert('Hello world!');

settings.json

{"view":"split-vertical","fontsize":"100","seethrough":"","prefixfree":"1","page":"css"}