Brief discussion on CSS3 elastic box model

Last night to listen to a small program of public class, in the layout, inadvertently saw the shape of the elastic box, before only know Box-flex, but because of compatibility issues, the user is very few, after all, most of the market on the browser must be prefixed to achieve, it means more write a few lines of code, in fact, this is not a thing, But most cxy are lazy, can do a line of code to do not write two lines. There's a lot of crap. Back to the chase.

I learn what to follow, what is it? Why? How to use it? What's the problem? Below I will follow these four directions in-depth chat, the level is limited, there are problems in the place please advise.

first, what is it?

Believe that most cxy encounter problems, I do not know whether it is a mule or horse, will be habitual Google, I am no exception, really do not know, a valley scare jump. Instead of the property itself, this attribute is the fuse that gives me a look at the new box model in the next CSS3-The Elastic Box model (flexible box models). For me, this kind of fluid layout control, the appearance of this box model is like playing Mahjong bar on the side of the flower to the edge of seven, people excited. In foreign countries, elastic box models began to be mentioned, researched, and applied as early as 09.

css3The elastic box model is a new feature that lets you say goodbye to the floating, perfectly vertical horizontal center. Flexboxis a layout module, not a simple property, which contains the attributes of the parent and child elements. FlexboxThe main idea of the layout is that elements can be resized to fit the available space, and when the available space becomes larger, the flex element will stretch to fill the available space and will shrink automatically when the flex element exceeds the free space. In short, the flex element allows you to automatically scale your layout according to the size of the browser.

second, why?

As mentioned above, the traditional layout solution, based on the box model, relies on the Display property + Position property + Float property. It is very inconvenient for those special layouts, for example, vertical centering is not easy to achieve.

--Eat first, then continue.

Brief discussion on CSS3 elastic box model