Flexbox, a more elegant layout

In the design of the eye, the layout of the operation is a very simple thing, on the left, set, on the right, I just click, all elements, will be obediently to the designated location.

But to the front-end in the implementation of typesetting, it is not the case.

We often have to use a bunch of properties that are not actually used to do hack, for example, with line-height to do vertical, so do can achieve the effect, but in the semantics is a bit bad, take just mentioned line-height, this would have been used as paragraph spacing, But because this belongs to the performance of the extended text of the upper and lower space, the result is also taken to do vertical placement. Is there a way to better implement the Web layout?

This is Google's Angular. They made a set of UI a few months ago to implement the Material Design on the Angular. This framework is used to implement the layout, not the previous float, but the Flexbox.

What is Flexbox? The official explanation for the website is that it is designed to achieve a more complex layout. My own definition of him is that Flexbox is essentially an extension of box-model, and we all know that Box-model defines a box model of an element, but Flexbox further regulates the relative relationships between these box models. And do not need to use some very cheat practice, to hack some of the properties that should not actually be used to do layout layout.

As a front end that likes to play something new, it should be said that every person who has contact with the Internet needs to learn something new.

This is when I meet new things, I will certainly ask myself three questions:
1. What can this do? So what's the problem he can solve?
2. Where can I use it? Where can you use this method?
3. Why can I use it? What is the logic he uses to achieve this?

Then I'll share with you the answers I've found so far since I asked myself the three questions I saw Flexbox.

Function

For example, all the front ends will have pain points, in the set, how have we been implemented before?

The most commonly seen is to use absolute positioning, and then the top and left offset 50, in the margin offset back. But this only applies to elements that are already fixed size.

The practice seen in recent years is that, before you want to set the element, add an element, do not want to tube too old IE words, even pseudo-elements can also. In the container with Text-align, and then the bottom of the two elements into the form of an inline, in the use of vertical-align. His advantage is that even if the underlying element changes size with the content, it can always be maintained vertically and horizontally, regardless of the change.

Of course, there are a lot of ways to do it, not one of them, let's see how to use Flex.

With Flex, you can do it with ease, without a bunch of attributes, even if they're not used in the first place. All I have to do is designate the container as a Flex container, and then justify-content let him position horizontally, then align-items it vertically. I can do it very simply and elegantly.

Well, maybe you would say, huh? Since one can, then how many more could I put in? Actually, you can.

Let's say we now have three elements under the container, oh, here's the Flexbox of another cock-frying-day function.

Assuming that an element is 40 and the other is one or two, then in a Flex container, as long as you have set the Flex-grow attribute, his third element will fit into the width and fill the empty space of the remaining container. And in the presence of multiple elements, we can still easily put them in place.

As we have just mentioned, Flexbox is used to regulate the relative relationship between box models, from which you can see. Now that I set the justify-content to Space-around, the elements become dispersed and aligned in the Flex container.

Let's look at a few more examples of the steps in the element.

This is a website I have seen recently. We can see that there's a Slider underneath him, and there's a problem, and it's often a pain point in front of the page, and we want all the sub-elements to be high. In the past, it was difficult for us to use CSS only to do so.

And Flexbox can easily use CSS to do this. Just add Align-items to the Flex container. You can implement all the elements underneath the container, as high as the highest element.

Even if I add some content to the highest element of the original, the other elements will certainly maintain the same height.

Compatible

Flex was first developed by the 09, and then it was extensively discussed. Take the specified element for a flex container, the first version is Display:box, the second version is Display:flexbox, and the third version is Display:flex. It's too complicated, fortunately now in the open source world has greatly made these three versions of Flex into some mixin, when used, you just have to include in the.

As with IE's experience, all the good things and ie basically do not touch the top, so if you need to consider IE users, then please be cautious into. So some people say that the function of IE is only used to download Chrome and Firefox.

Principle

If you search for flex on the Internet, most of the ink will be in his alignment, and his control of how the DOM order works. But today we want to talk a little bit deeper, flex item width calculation, most of the cases, we only care about the proportion of the display, which is also the width of the calculation is less discussed, but if you want to control the display width of the item more precisely, in fact you need to understand, in a flex container , how the width of the item is calculated.

When we designate a container as a flex container, the item inside it is actually set up: flex:0 1 auto

These three numbers actually represent: Flex-grow, Flex-shrink, flex-basis, these three attributes can be said to be the reason why flex is smart.

Let's talk first. Flex-basis well, this property in the Flex container is horizontal, in fact, is the width, when we specify the item as flex:0 0 480px, is actually the width of the set to 480px. But doesn't that show anything special about Flex? Why do you want to repeat the set width?

It's time to talk about the other two properties: Flex-grow, Flex-shrink

These two properties are actually twins, and grow indicates the width of each item added to the item in order to fill the container when the item's total width is smaller than the container. Suppose there are three basis for the item with a 100px. We give grow values of 3, 2, 1, respectively, from left to right, so what is the actual width of the leftmost item when Flex is applied? The added width is 90px, so the width of the last leftmost item is 190px.

We just mentioned that grow and shrink are actually twins, actually they are really like, shrink said when the total width of the item is larger than the container, in order to get the item to fill the container, each item reduces the width. But the formulas are not the same. Why? Because it doesn't matter when you add, but when you subtract, if you only calculate the shrink value given, it's likely that the last reduction is larger than the basis, so the width of the item becomes negative. So how do we fix this? Calculate the basis as a parameter, so that the reduced width will never be less than basis. So we can get the revised formula, the same as the left-hand example, the final calculation to reduce the 60px, so item becomes 140px. The above brain does not matter, it is OK, actually most commonly used is only flex:1.

Speaking of which, you just said that this thing is very strong, then you have a fastest and most simple rough way to say Flexbox really is a good thing?

Well?? It's a little hard, but I think I can.

Reference: https://ruby-china.org/topics/23767

Flexbox, a more elegant layout