Cross-browser Flexbox:css flexible box Model 3

Article Introduction: CSS Flexible Box Model 3 is also referred to as Flexbox. Abandoning the traditional use of some hack and components, flexbox to the development of the network has brought a lot of positive energy and excitement, let us together to make complex web site layout easy and fast.

Brief introduction

CSS Flexible Box Model 3 is also referred to as Flexbox. Abandoning the traditional use of some hack and components, flexbox to the development of the network has brought a lot of positive energy and excitement, let us together to make complex web site layout easy and fast. Earlier in flexbox:fast track to layout nirvana? The article introduces some basic knowledge of flexbox. In this article, I'll go further and borrow the Modernizr script library to do some flexbox with different styles in the browser, providing the best presentation level for Flexbox in each browser.

Launch case

The example created in this article looks like the following illustration:

Picture Final layout example.

This example includes multiple telescopic containers (Flexbox container). If you prefer, you can click on the example to view, read or explore more detailed code.

Overall Layout

The basic layout of the sample Web site is this:

set to a telescopic container, the code looks like this:

Section {   display:-ms-flexbox;   -ms-box-orient:horizontal;/*ie10 in a row, similar to the Flex-direction:row function/    display:-webkit-flex;   Display:-moz-flex;   Display:-ms-flex;   Display:flex;      -webkit-flex-flow:row Wrap;   -moz-flex-flow:row Wrap;   -ms-flex-flow:row Wrap;   Flex-flow:row Wrap; }	 

Note: from 2011 to the latest specifications provided by opera and Chrome, because IE10 currently supports different flexbox syntax, set specific properties in IE10. Firefox and other WebKit kernel browsers (such as Safari) support an older version of the Flexbox Syntax (2009), which uses flexbox worse. In addition, the MODERNIZR report IE10 support modern Flexbox syntax, although it is not used, so we need to use the old syntax to deal with the Flexbox effect under IE10, rather than using MODERNIZR rules to do IE10 compatibility. Details can be read below, you can get more details of the introduction.

Keep them all on the same level stream, but

use the following rules to force them to appear on a separate line:

Nav {   padding:1rem;    -webkit-flex:1 100%;   -moz-flex:1 100%;   -ms-flex:1 100%;   Flex:1 100%; }	 

Set "Flex-basis" to 100%, using its width as the width of the parent container, while forcing other scalable items to the new line. The value of the

"Flex-grow" is set as follows:

Article:nth-of-type (1) {   -webkit-flex:2;   -moz-flex:2;   -ms-flex:2;   Flex:2; }  Article:nth-of-type (2) {   -webkit-flex:3;   -moz-flex:3;   -ms-flex:3;   Flex:3; }	 

So that they have a certain proportion of the space at the spindle point-the first

40%, that is, two-fifths of the width, the second (that is, the picture container) accounted for 60%, that is, three-fifths of the width. It is worth remembering--this ratio is only available on the same line as the telescopic project has, not all the scale projects have the proportions.

Note:"Flex-basis" is a shrinking base value, first used in telescopic projects, after which the remaining space of the spindle will be divided according to the "Flex-grow" scaling ratio of each telescopic project to each telescopic project, allocating the remaining space of the spindle. When "Flex-grow" does not have an explicit set value, its default value is "1". To get a better idea of how he works, you can read the Flex section of the Flexbox module, or read the article "flexbox--Quick Layout artifact ," which contains a description of flex.

Telescopic Project

When you set an element as a telescopic container, it only affects his child elements without further influence on his descendant elements. But nothing can stop you from setting up a scalable project for their descendants, and using some layouts complicates it. Quite simply, here, I set the

to a telescopic container, and I can align him in the center, without having to worry about the width of the container or the width of the window.

Nav {     display:-ms-flexbox;   -ms-box-orient:horizontal;   -ms-box-pack:center;/*ie10 Horizontal Center *    display:-webkit-flex;   Display:-moz-flex;   Display:-ms-flex;   Display:flex;      /* Horizontal Center * *   -webkit-justify-content:center;   -moz-justify-content:center;   -ms-justify-content:center;   Justify-content:center;  }	 

Then the

is set as a telescopic container to ensure that his child element Li can be centered, as shown in the following code:

Nav ul {   text-align:center;    Display:-ms-flexbox;   -ms-box-orient:horizontal;   -ms-box-pack:center;    Display:-webkit-flex;   Display:-moz-flex;   Display:-ms-flex;   Display:flex;   -webkit-flex-flow:row Wrap;   -moz-flex-flow:row Wrap;   -ms-flex-flow:row Wrap;   Flex-flow:row Wrap;   -webkit-justify-content:center;   -moz-justify-content:center;   -ms-justify-content:center;   Justify-content:center;    width:80%; }  nav a {   width:100%;}	 

I also added some properties to fix the appearance of navigation menu items. I want

not fully stretched across the screen, and have all the text centered, so I set up a "width:80%" and "Text-align:center". The link is also set to a width of 100% to ensure that the link spans the entire list item width.

Then came the magical moment. At this point, the list items look slightly overlapping and strange, and they look a little silly when they start packing. Without using a media query to implement a responsive menu that looks cool, then we need the following code to implement:

Nav ul li {   margin:0 1.5rem;      -webkit-flex:auto;   -moz-flex:auto;   -ms-flex:auto;   Flex:auto;      Min-width:5rem; }	 

Here, I set up a margin for list items, let them have some space, set up a min-width for them, and set "Flex" to "Auto". This is a special value for Flex, which allows the telescopic project to have a min-width value, allowing the telescopic project to maintain a constant size (min-width) when there is no extra space, but with excess space, the expansion can be filled. See what happens when you expand and shrink the page?

Next set the second

, and set the inside each paragraph (including the IMG in the paragraph):

 Article:nth-of-type (2) {display:-ms-flexbox;   -ms-box-orient:horizontal;   -ms-box-pack:center;    -ms-box-align:center;   Display:-webkit-flex;   Display:-moz-flex;   Display:-ms-flex;      Display:inline-flex;   -webkit-flex-flow:row Wrap;   -moz-flex-flow:row Wrap;   -ms-flex-flow:row Wrap;      Flex-flow:row Wrap;   -webkit-justify-content:center;   -moz-justify-content:center;   -ms-justify-content:center;      Justify-content:center;   -webkit-align-items:center;   -moz-align-items:center;   -ms-align-items:center;      Align-items:center;   -webkit-align-content:flex-start;   -moz-align-content:flex-start;   -ms-align-content:flex-start; Align-content:flex-start;      } article p {margin:0.5rem;   -webkit-flex:1 20rem;   -moz-flex:1 20rem;   -ms-flex:1 20rem; Flex:1 20rem;   } Article p img {display:block;   width:100%; BORDER:1PX solid black; }	 

Here they set a fixed flex-basis value, so they will increase and decrease their width based on the number of rows (as shown in the figure below, no media query is used), and each item will be centered horizontally vertically with the contents of each item.

A response image box without a media query.

Flexbox Feedback

Browsers that support Flexbox have webkite kernel browsers, presto-based Opera, and Firefox (forthcoming), and it will take some time to really support mainstream browsers. This means that if we want to use Flxbox, we also need to choose some record-keeping methods. 2009 began some browsers (old WebKit, Firefox) to support the old version of the Flexbox syntax . Oddly enough, IE10 supports both the old syntax and the new syntax from 2011. Thankfully, the Modernizr script library uses the "Flexbox" and "flexbox-legacy" tags to detect flexbox modern syntax and flexbox old syntax. In fact, it doesn't support either of these-it supports a syntax between the two. That's why we've been writing code in IE10 in CSS instead of using MODERNIZR code blocks, which you'll see later in the article.

Note: As of April 2013, there have been discussions on how to deal with Flexbox detection in IE10 in Modernizr .

The following table summarizes the Flexbox latest syntax and the equivalent mixed syntax for 2009 and 2011:

The table above shows different flexbox syntax support across different browsers for different attributes of the equivalent.

Note: the canonical "Box-lines" attribute from 2009 looks equivalent to "flex-wrap", but unfortunately this does not support a mixed-syntax browser.

So, I added the following code in the example to implement the Flebox effect of browsers that support flexbox blending, but not flexbox:

. no-flexbox section {   display:-webkit-box;   Display:-moz-box;      -webkit-box-orient:horizontal;   -moz-box-orient:horizontal; }  . No-flexbox nav {   padding:1rem;   width:20%; }  . no-flexbox article {   -webkit-box-flex:1;   -moz-box-flex:1; }  . No-flexbox Article P {   float:left;}  . No-flexbox article img {   display:block;   width:200px; }	 

Then add compatible style codes that do not support flexbox in the style, and do not even support mixed flexbox syntax browsers:

. No-flexbox-legacy nav,. no-flexbox-legacy article {   float:left;}  . No-flexbox-legacy nav {   width:20%}  . No-flexbox-legacy article {   width:36%}  . No-flexbox article img {   float:left;}	 

Note: a flexbox code to generate Cross-browser, and can help you understand the different browsers use the syntax of the online tool flexy Boxes.

Flexbox Online Generation Tool

Other tools similar to the flexy Boxes online generation Flexbox are included in 70+ 's excellent front-end tools :

1. Flexplorer
2. CSS Flexbox please!
3. Flexiejs

--Desert

add a simple media query to achieve widescreen and narrow screen layout

Finally, to solve the widescreen and narrow screen layout, I decided to add a few media queries. But notice how to add the code to the media query because Flexbox is inherently the artifact that creates a responsive layout.

First, write some code in support of mixed syntax to solve the response effect:

@media all and (max-width:600px) {   h1 {     font-size:5rem   }      . No-flexbox section {      -webkit-box-orient:vertical;     -moz-box-orient:vertical   }      . No-flexbox nav {     width:100%;     Margin-left: -3rem   }      . No-flexbox nav A,. No-flexbox nav ul,. No-flexbox nav li {     width:100%;   }  }	 

Next, a modern flexbox fix, not in all browsers, in the small screen width.

@media all and (max-width:480px) {   Article:nth-of-type (1) {     -webkit-flex:1 100%;     -moz-flex:1 100%;     -ms-flex:1 100%;     Flex:1 100%;   }      body {     min-width:320px;   }      Nav ul {     width:100%   }        . No-flexbox-legacy nav,. no-flexbox-legacy article {     float:none;   }    . No-flexbox-legacy nav,. no-flexbox-legacy article {     width:100%;   }}	 

Finally set a center effect with a media query for a large number of screens:

@media all and (min-width:1100px) {section   {     width:1100px;     margin:0 Auto;   } }	 

Summary

There is a limit to the use of Flexbox, when the same way to support the modern browser, Flexbox will become more easy. So far, more effective support, just a few simple effects, a single line can be used Flexbox, for multi-line in the mixed syntax can not get browser support. Because of its standard, my example runs very well, although the flexbox of mixed syntax is not as good as the modern flexbox layout. Another interesting issue is that Firefox does not seem to support centering, and later had to use "margin:0 Auto" to do it (in Safari Support Center).

Some of the simple uses of Flexbox can be well supported in modern browsers (Chrome, Firefox, Safari, Opera Presto 12.1+,ie10+,ios and Android).

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://dev.opera.com/articles/view/advanced-cross-browser-flexbox