Flexboxing lists

dabblet.css

/**
 * Flexboxing lists
 */

ul{
	display:flex;
	flex-direction: column;
	margin: 0;
	padding: 0;
	height: 100vh;
	border: 1px solid red;
	width:24em;
}
li{
	flex-grow:0;
	flex-shrink: 0;
	display:flex;
	flex-direction: row;
	justify-content:space-around;
	align-items:center;
}
li > div {
	flex-grow:1;
	flex-shrink:1;
	max-width: 50%;
	display:flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
}
li:nth-child(even){
	background: gray;
}
ul > li {
	height: 20vh;
}

dabblet.html

<ul>
<li>something</li>
<li>something else</li>
<li>something too</li>
<li>something more</li>
<li><div>one line</div><div>another line that goes longer and should wrap pretty soon</div></li>
<li>something</li>

</ul>

dabblet.js

// alert('Hello world!');

settings.json

{"view":"split","fontsize":"100","seethrough":"","prefixfree":"1","page":"result"}