Using the CSS3 flexible Boxes layout

Turn from 1190000000484017

What is flexible box? Flexible meaning is scalable, box meaning box, can be understood as a new box model-telescopic box model. Proposed by the CSS3 specification, this is in the original everyone very familiar block with inline-block , inline based on the extension of the new generation of layout mode.

Browser compatibility

As a very real developer, whether to focus on a new technology, first of all to consider its browser compatibility. The browser compatibility of our telescopic box model still looks pretty good.

Can see, the modern browser basically support, IE10 started also support (IE and Safari respectively plus -ms- and -webkit- prefix), mobile support is also relatively good, the only unsupported platform only opera, we do not take him to play →_→

So, comrade Obama said: The Telescopic box model is good and promising. (Mmm, hmm)

Basic concept of Telescopic box

The biggest feature or advantage of the telescopic box is that it takes into account the contradiction between today's high house prices and the growing demand for housing, where the size of the house is limited, but our telescopic box is the most reasonable and efficient way to share the room. More area, give the big guys more points, small area, let you squeeze a little points, in short, will not let anyone sleeping on the street (overflow)!

Now that we have mentioned the relationship between the house and the tenants, the arrangement of the tenants naturally needs to follow a certain direction. For block-level elements, the layout extends from top to bottom, that is, portrait-oriented. For inline elements, the layout extension direction is from left to right, which is horizontal. And the Telescopic box, its direction is variable, can both longitudinal extension, can also stretch horizontally, depending on your settings.

Basic terminology for Telescopic box models

The idea of the telescopic box model is quite different from the layout thought of ordinary block-level elements and inline elements, and it introduces some new concepts and terms, which are shown in the following diagram:

Flex Container Telescopic box container
This is the house to divide, this is a magical house, to make it magical, display declare attributes as flex or inline-flex can ~

Flex Item Scaling Items
The residents of the house, they will occupy their own housing area.

For the sake of image description, we use code to explain.

class="container">  <div class="item item-1">item 1</div> <div class="item item-2">item 2</div> <div class="item item-3">item 3</div></div>

The CSS is set to:

.container {  display: flex;  width: 300px;  height: 100px;  ...}

It display: inline-flex; seems to be possible here, too.
For the scaling elements, we need to give them a pre-arranged housing area ratio, we use the simplest and healthiest 1:1:1 Bar ~ We declare the proportions in the flex attribute

.item-1 {  flex: 1;  ...}.item-2 {  flex: 1;  ...}.item-3 {  flex: 1;  ...}

voilà!

Our big house was perfectly divided into three compartments, and three split the rent!

If someone wants to live in a larger house, we flex can change the ratio directly:

.item-1 {  flex: 1;  ...}.item-2 {  flex: 1;  ...}.item-3 {  flex: 2;  ...}

Isn't it convenient?

Axes Shaft
As we can see, there are two axes in the figure, with the spindle and the secondary axis (perpendicular to the spindle) marked separately. However, in fact, which one is the main axis is not certain, we have to stipulate.
1. flex-direction This property specifies which axis is the spindle.
2. justify-content This property sets the way the scaling items are arranged in the spindle direction, which is explained later.
3. align-items This property justify-content , relative to the above, represents how the scaling item is arranged on the secondary axis.
4. align-self This property specifies how a particular scaling element is laid out on the secondary axis, and setting the property on an element overrides its align-items properties. That is, this attribute will make an element more personality, do not take the ordinary way ~

Flex-direction
When we don't want to split the house along the default direction, we can change the flex-direction value of the property to change the spindle and direction, the default value is row;

.container {  flex: row-reverse;  ...}

As the name implies, this allows the alignment of the scaling items in turn:

When this property is set, the primary and column secondary axes are swapped, and the direction of the elements is changed as well:

.container {  flex-direction: column;  ...}

As flex: column-reverse for the meaning of it is not necessary I say more ~

Justify-contents
Sometimes, we live next to each other, a little space is not also very uncomfortable, even an aisle is not, privacy can not guarantee it. At this time, we can change the allocation policy, no longer proportional distribution, but the quota allocation, each person's area is determined. The extra housing area is converted into a communal area.

.item {  width: 80px;  ...}...

After setting the width attribute also remember to remove the declaration of the flex property, otherwise flex the effect of the property will still be width covered out ~
At the same time, if the width attribute is not set, the width of the element will appear as the width of the content, which means when there is no content inside the extension, it will not render, it behaves the display: none; same.
At this point, declaring the property on the container justify-content can arrange the position of the scaling item:

.content {  justify-content: flex-start | flex-end | center | space-between | space-around;}

Align-items
This property changes the way the elements are arranged on the secondary axis, and for this example the height of the element in the direction of the secondary axis is represented height: 100%; , and when the attribute is set align-items , its height will change.

.content {  align-items: flex-start | flex-end | center | baseline | stretch;}

When it comes to this, the specific performance of the telescopic item can be imagined, do not imagine it to try it yourself ~

Order
Declaring this property on a scaling item allows you to ignore the order of the HTML structure and arrange it in a order small-to-large order flex-direction . Like what:

.item-1 {  order: 3;  ...}.item-2 {  order: 1;  ...}.item-3 {  order: 2;  ...}

Flex-wrap
The default value of this property is nowrap , that is, ignore the width of the extension, the tube you want to how much housing area, all according to flex the allocation of property agreed, not to change line.

.container {  flex-wrap: nowrap | wrap | wrap-reverse}.item { width: 150px;}

Flex-grow,flex-shrink and Flex-basis
The properties mentioned above flex are actually shorthand for these three properties. These three attributes have similarities, all of which represent a relative proportional relationship between an item and the allocated space between items, except that:
1. flex-grow property: The value of the property is the ratio of the space occupied by the scaling item to other scaling items (items that declare the flex related property).
2. flex-shrink Properties: The ratio of the scaling to other scaling items, that is, when the flex-shrink: 3; item occupies a space of 1/3 of the other items.
3. flex-basis property: The value of the property is the percentage of space that the item occupies in the container space.

Note: For flex-basis attributes, when the attribute values of all items are added <=100%, they are rendered exactly as a percentage value. When the attribute values are added >100%, the elements do not overflow, but show that the space size between 22 follows the percentage ratio of each other. That is, when there are three scaling items and the flex-basis values are the 50% same, the behavior behaves like three items flex: 1; .

Flexible boxes layout mode is particularly useful in responsive development, and it can be very simple to set the spatial distribution relationship between elements for different terminals. Telescopic box layout and responsive layout of the popular fluid layout which is better, or can be combined to see the developers play their own ingenuity!

Using the CSS3 flexible Boxes layout