CSS flexible Box model will be the future of CSS

Article Introduction: the future of CSS: the transformation of the game Flexbox.

HTML5 and CSS3 provide Web developers with new syntax tags, local animation tools, server-side fonts, and more, these are not the end. Developers are struggling to dig a trench for web design-the real page typesetting tool, in fact, even the most promising CSS3 are still on the horizon.

While it can create surprisingly complex layouts, such as CSS suspension, positioning rules, and some weird JavaScript, none of these tools is intended for explicit layout, which is why you want to use these tools in your browser to achieve the layout you want is so surprisingly complex. Soon you can embed your suspension effect in a better way-CSS flexible Box Model, which can be simply called Flexbox. Flexbox allows you to create a complex layout with a few lines of very simple code-no longer requires suspension and "clear suspension."

Maybe it's a little more powerful--especially building response Web site-Flexbox's order attributes allow you to create a completely separate layout in the HTML source sequence. For some reason, do you want your own footer to appear above the page? No problem, just set your footer CSS to order 1,flexbox or you can make it vertically centered.

Flexbox existed long ago, but its specifications were rewritten, and the old code was obsolete. If you want to learn new syntax, here's a simple demo.

We'll take you on mobile devices and desktop applications using Flexbox for layout design, using a small number of code implementations to rearrange source order and element layout code, instead of previous work using suspension or other old layout tools. The best way to fill your head with Flexbox is to see how it moves, so be sure to show it in browsers such as Chrome,opera or Firefox 20+.

For some browsers, it's still a bit too early to use Flexbox. Browser support continues to improve, but obviously older browsers do not support Flexbox, so keep this in mind. Opera 12 supports the new syntax and does not require a prefix. Chrome supports the new syntax, but requires a-webkit prefix. Like Opera, Firefox 22 supports flexbox that do not need to be prefixed. V22 (now the beta version) Firefox supports the old syntax. IE 10 supports the old syntax. Most mobile device browsers support the old syntax, although they start to change. (Firefox's support for Flexbox has been postponed to V22.) In fact, from V20, he began to support Flexbox's new syntax, but before V22 version, this support was set to be invalid by default. If you want to activate it, you need to search for the layout.css.flexbox.enabled option in About:config, set it to usable, and then the new syntax will be available in your browser. ）

So, as mentioned above, only two browsers fully support the new Flexbox syntax, and of course Firefox will join next month, making browsers that support the new syntax become three.

But there are still ways to circumvent some of the problems. First, read Chris Coyier about mixing the old and new syntax to get as much support as possible for browsers. The Coyier method makes your flexbox layout can be very beautiful in the version above IE9.

If it's just your own personal site you can use IE9, because you probably just need a simple linear layout. Alternatively, you can provide an extra style sheet (or use CSS class, if you prefer) for a lower version of IE that contains a few floats or a float. This makes Flexbox's benefits impossible, because you need to write code to implement the suspension, but when the usage is reduced, you can dump your code, transplant your site, and move forward on the web.