flex-wrap.html

<!-- This gist discribes a workaround for Android <4.4 and iOS <7.

The problem is that those iOS and Android versions do not support
flexbox wrapping and make (in the case I was working on) them invisible.

The goal is to flex a list of items with a fixed width and in case of floating a fixed height.

The workaround uses Modernizr to check if modernflexbox is available.
If not or JS is turned off, everything will be floated.

Tested in Android 2.3.n, Android 4.2.n, Android 4.4 and iOS 6.n, 7.n
in Android Browser, Chrome and Safari, each where available.

This is the workaround: -->

<style>
	.wrapper {
		/* old stuff*/
		display: -webkit-box;
		/* /old stuff*/
		display: -webkit-flex;
		display: flex;
		/* flebox setup */
		-webkit-box-wrap: wrap;
	    -webkit-flex-wrap: wrap;
	    flex-wrap: wrap;
		-webkit-box-pack: justify; /*or content?! have to find out what works...*/
		-webkit-justify-content: space-around;
		justify-content: space-around;
	}
	html:not(.flexbox) .wrapper {
		display: block;
	}

	html:not(.flexbox) .wrapper li {
		float: left;
		height: 300px;
	}

</style>

<ul class="wrapper">
	<li>content</li>
	<li>content</li>
	<li>content</li>
</ul>