Hacker News Reader

Comment by acdha | Hacker News Reader

Depends on what you need for browser support – flexbox is supported in fewer browser versions and requires using multiple rules because the spec changed significantly before finalizing:

http://caniuse.com/#feat=css-table

http://caniuse.com/#feat=flexbox

View on HN

Which is why you use something like AutoPrefixer to automagically generate the needed browser prefixes and such, makes it a whole lot easier.

Which still doesn't cover older browsers just prefixes things appropriately for those that support it.

Fair enough, but for my uses 92% browser support is more than enough, it's the same as ems/rems for example.

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;
		}

That assumes support exists at all (many people need IE8) or isn't broken in some way which affects your design (Mobile WebKit is the worst offender here but I've had to file bug reports for every major browser on this).

I want to just start using flex box everywhere, too, but we're just at the point where that's becoming realistic. I won't fault anyone for waiting if they have more representation from older browsers. The real progress lately has been the push for Microsoft to get IE onto more of an evergreen update schedule so we won't have to keep doing this once XP and IE8 are a bad memory.

Reply on news.ycombinator.com