Flexbox layout properties in IE10 using specific details

Article Introduction: Flexible box ("Flexbox") layout in IE10.

After the introduction of this series of Flexbox , I think we have a good understanding of the use of Flexbox in layout and its powerful features to the convenience of our layout. Words again, although flexbox powerful (especially flexible layout), but still many students do not dare to use, do not want to try sexual use. I think the main reason is because of his many grammatical versions, browser compatibility and so on.

In the"old" Flexbox and "new" Flexbox, we learned how to identify the syntax version of Flexbox, and in the use of Flexbox: New and old syntax mix to achieve best browser compatibility and the Cross-browser Flexboxto achieve the perfect compatibility of the browser.

Compatibility diagram for Flexbox layout modules:

Now that there are solutions that allow Flexbox layout modules to be compatible in many browsers, what are we going to say today? As you can see from browser compatibility, the latest syntax for the Flexbox layout module, "Display:flex", is supported in chrom25.0+, opera12.1,firefox22+, and ie11+. But we also have a lot of users who are not like our front end people will update their browser versions in time. Then there is the Flexbox compatibility problem. Said a lot of nonsense, has not come in the theme, really a bit sorry to readers, and then do not waste everyone valuable time, we go into today's theme--ie10 flexible box ("Flexbox") layout

recall the function of Flexbox layout

The previous tutorial also mentions that flexbox layouts are useful for designing more complex pages. You can easily change the size of the screen and browser window to keep the relative position and size of the element unchanged. It also reduces the definition of the position of the element that relies on the floating layout implementation and resets the element's size. In simple terms, Flexbox implements a responsive layout without the need for media queries. (There are Flexbox to achieve the layout of the response, you can refer to the " response design of the future--flexbox" article).

Flexbox layout in the definition of telescopic items the large-hour telescopic container will reserve some free space so that you can adjust the relative size and position of the telescopic project. For example, you can make sure that the excess air in a telescopic container is evenly distributed across multiple telescopic projects, but if your telescopic container does not have enough space to place the telescopic project, the browser will reduce the size of the telescopic item to a certain scale so that it does not overflow the telescopic container.

In general, the Flexbox layout function has the following main points:

1. Screen and browser window size changes can also flexibly adjust the layout;
2. Telescopic items can be specified to distribute excess space (excess space in telescopic containers) proportionally along the spindle or side axis, thereby adjusting the size of the telescopic project;
3. Telescopic items can be specified along the main axis or side of the telescopic container surplus space, allocated to the telescopic project before, after or between;
4. You can specify how extra space perpendicular to the element layout axis is distributed around the element;
5. You can control the layout direction of elements on the page;
6. Elements on the screen can be reordered according to the sort method specified by the Document Object Model (DOM). That is, you can rearrange the scalable item order in the browser's rendering without following the document flow order.

syntax version of Flexbox layout

Flexbox layout of the syntax after several years has undergone great changes, but also to the use of flexbox to bring certain limitations, because the syntax version of a large number of browsers support inconsistent, resulting in flexbox layout use is not much. As we can see from the previous tutorials, there are three grammatical versions of the Flexbox layout:

1. The 2009 version, which we call the old version, uses "Display:box" or "Display:inline-box";
2. The 2011 version, which we call a hybrid version, uses "Display:flexbox" or "Display:inline-flexbox";
3. The 2013 version, which is the latest syntax version, uses "Display:flex" or "Display:inline-flex".

How do you differentiate these versions? How to obtain the relevant knowledge of the corresponding version, we can simply browse the"old" Flexbox and "new" Flexbox.

After understanding the historical development of the Flexbox layout version, the syntax for the Flexbox layout in the IE10 we are introducing today is a mixed version between the 2009-year old version and the 2013 new version--flexbox (display: Flexbox or Display:inline-flexbox).

[1] [2] [3] [4] [5] Next page