Simple flex-box demo

2012
28
February
1:37 pm

I constantly find myself nipping onto google for a quick little flex box demo because I still haven’t memorized what’s required. Since it always takes me a couple of minutes, I figured I’d pop one on here.


.demoFlexHolder{
	display: -webkit-box;
	display: -moz-box;
	display: -o-box;
	display: box;
			
	-webkit-flex-flow: 	column;
	-moz-flex-flow: 	column;
	-ms-flex-flow: 		column;
	-o-flex-flow: 		column;
}

.demoFlex{
	-webkit-box-flex: 1;
	-webkit-flex: 1;
	background:#A9D1FE;
}

.demoNonFlex{
	width:180px;
	background: #ccc;
}
Fills the rest of the space
Sticks at 180px.
​​​​​​​​​​​
Posted in: Design
Tagged with:
Download
Source

Leave a Reply

Your email address will not be published. Required fields are marked *