Flexbox new Grammar Old grammar mix lets the browser perfect display

Article Introduction: use Flexbox: The new and old syntax blends to achieve best browser compatibility.

Flexbox is very good, definitely a mainstream of the future layout. In the past few years, the grammar has changed a lot, here is a "old" and "new" New grammar Difference tutorial (if you are not very interested in English, you can move to read the Chinese version ). However, if we mix flexbox new syntax, old grammar, and intermediate transition syntax together, we can let the browser get the perfect display. Especially for a simple and most likely common instance: Control grid order.

HTML Structure

A semantic container, "Page-wrap", wraps three primary areas and sets the container to a telescopic container, where each outer area of the container automatically becomes a telescopic project.

 
        main content:first in Source Order           Links           sidebar    
 
	 

The results we are going to achieve are as follows:

Telescopic Container

We need to use our columns to display the context in a telescopic container. Only in this way can these elements become directly scalable projects. What they had before was nothing to do with as long as they were now telescopic projects.

We need to mix flexbox old grammar, intermediate grammar and the newest syntax, where their order is very important. The "display" property itself does not add any browser prefixes, and we need to make sure that our old syntax does not overwrite the new syntax so that browsers (and probably always will) support it at the same time.

. page-wrap {   display:-webkit-box;      /* Old-ios 6-, Safari 3.1-6 * *   display:-moz-box;         /* Old-firefox 19-(buggy but mostly works) * *   display:-ms-flexbox;      * Tweener-ie   /display:-webkit-flex;     /* new-chrome * *   Display:flex;             /* NEW, Spec-opera 12.1, Firefox 20+ * *  }	 

Control Column Width

Our goal is to create a 20%, 60%, 20% grid layout.

The first step is to set our main content area width to 60%.

The second step is to set the sidebar to fill the remaining space.

Also mix the old and new grammar together:

. main-content {   width:60%}. Main-nav,. main-sidebar {   -webkit-box-flex:1;      /* Old-ios 6-, Safari 3.1-6 * *   -moz-box-flex:1;         /* Old-firefox 19-* *   width:20%;               /* for old syntax, otherwise collapses. * *   -webkit-flex:1;          * * Chrome   /-ms-flex:1;              /* IE Ten * *   flex:1;                  /* NEW, Spec-opera 12.1, Firefox 20+ * *}	 

In the new syntax, it is not necessary to set the width of the sidebar because they also fill the remaining 40% space with a 20% ratio. But I find that if you don't give them an explicit set width, they will crash directly under the old syntax.

Order of reordering

I want the main content to be arranged in the middle, but in the source he is ranked in the first place. Using Flexbox can be very easy to implement, but we need to mix the different syntax of the Flexbox to use:

. main-content {   -webkit-box-ordinal-group:2;   /* Old-ios 6-, Safari 3.1-6 * *   -moz-box-ordinal-group:2;      /* Old-firefox 19-* *   -ms-flex-order:2;              * * Tweener-ie-   -webkit-order:2;               /* new-chrome * *   order:2;                       /* NEW, Spec-opera 12.1, Firefox 20+/}. main-nav {   -webkit-box-ordinal-group:1;     -moz-box-ordinal-group:1;        -ms-flex-order:1;        -webkit-order:1;     order:1; }. main-sidebar {   -webkit-box-ordinal-group:3;     -moz-box-ordinal-group:3;        -ms-flex-order:3;        -webkit-order:3;     Order:3; }	 

Supported Browsers

If you mix flexbox multiple versions together, you can get support from the following browsers:

• Chrome any
• Firefox any
• Safari any
• Opera 12.1+
• IE 10+
• IOS any
• Android any

The most restrictive of course is IE browser, but in other ways it is good. If you are making a specific mobile version of the site, you will also get better support. If anyone is testing on the window version of the phone, please tell me about the test results.

Firefox19 has a problem, you need to look at it. For example, in this case, I can't close the dead side bar to 20%. This is just folding to the width of the content, which may be a bit arbitrary. I need to set "-moz-box-flex:1", otherwise the main content (60%) will extend to and the widest paragraph, as if the paragraph set the "White-space:nowrap", this is simply inexplicable.

DEMO

The case of Codepen

Translator's Sign Language: the entire translation is carried out according to the original line, and in the process of translation slightly individual understanding of the technology. If the translation has the wrong place, but also please peer friends pointing. Thank you!

If you want to reprint, please indicate the source:

Original English:http://css-tricks.com/using-flexbox