But for older browsers you can use the old specification too. This means including the old specification before the new one in the CSS block; that will provide a warning in the web-inspector. Then you will need a hack for <=IE8, but I have had this working on a site since autumn 2013 (not a public site and I therefore knew what browser versions had access). It is doable and it provides a flexible layout.

here is a sample (btw, it's so long ago now, I included modernizer.js and slectivizr.js but I have no idea if they were anything to do with this >_< and why I keep referencing "flexie" I have no idea, the script, if it even was a script isn't included on the page.... SO professional, such memory... ):

    	#box_content {
	/* 1st draft flexbox required for IE8 layout using 'flexie' */
		display: -moz-box; display:-webkit-box; display: -ms-box;
	display: box;
		-webkit-box-orient:horizontal; -moz-box-orient:horizontal; -ms-box-orient:horizontal;
	box-orient: horizontal;
		-webkit-box-align:center; -moz-box-align:center; -ms-box-align:center;
	box-align:center;
		-webkit-box-direction:normal; -moz-box-direction:normal; -ms-box-direction:normal;
	box-direction:normal;
		-webkit-box-pack:center; -moz-box-pack:center; -ms-box-pack:center;
	box-pack:center;

	/* 2013 flexbox! for FF3+, Safari3.2+, Chrome5+ */
	display: flex; 
		display: -moz-flexbox; display: -webkit-flexbox; display: -ms-flexbox;
	flex-flow: row wrap;
	justify-content: space-around;
	padding-bottom: 1.5em;
	}

		.phonebox, .addressbox, .qrbox, .emailbox {
			max-width: 250px; min-width: 200px;
			height: 165px;
			display: block;
			border-radius: 20px;
			color: #4d4d4d;
			box-shadow: 2px 2px 9px #333;
			border: 1px solid #A2E86C;
			margin-top: 0.5em;/* req. for small screens */
			/* More flexbox for older browsers (flexie.js)*/
			-webkit-box-flex:0; -moz-box-flex:0;
			box-flex:0;
			-webkit-box-ordinal-group:1; -moz-box-ordinal-group:1; -ms-box-ordinal-group:1;
			box-ordinal-group:1;
		}