instructions

This site does not support CodePen script insertion, you can go to my blog to read the version that shows the sample code directly.

Flexbox is confusing

There’s been a lot written about Flexbox, but there’s still a lot of confusion on the front end. On the one hand, flex has a wide variety of CSS properties, which can affect the specific effects of multiple aspects. CSS, on the other hand, can be written in the style of dictate properties (e.g. Background: url(images/bg.gif) no-repeat left top;) It is easy for beginners to get confused.

The Flexbox in this article is, of course, the elastic box model of the CSS3 specification, but I wrote the previous paragraph because I hoped that this article would solve the problem — simply put, that Flexbox is confusing. The solution is to understand it.

When do we think about elasticity

To understand the elastic box model, we need to start with the ancient strokes. Gu Long is Taiwan’s master of martial arts fiction, second only to Jin Yong in achievement. Some of gu Long’s characters are so deeply rooted that they are even more poignant and memorable than Jin Yong’s. There is, for example, a middle-aged man whose hands are very important throughout the novel, which Mr. Guron describes several times — “his fingers are long and powerful.” And in more than one book, in more than one or two episodes, there are several young women whose legs are very important, as Gurung describes them — “strong and elastic,” or “long and sturdy and elastic.”

Take a deep breath and think about it. Why are fingers described as “long and powerful” but thighs described as “firm and elastic”? This is really a question worth thinking about. In fact, human legs can also be “long and powerful”; Also, human fingers are flexible. But the description of the ancient master is by no means arbitrary. For the truth, you can casually look for some figure paintings containing thighs, or just imagine — how big is the area of fingers in a figure painting? Unless special effects are added to emphasize the hand, the area occupied by the fingers is very small; The thigh, in a normal figure painting, is full of space. Here said full, of course, does not mean that the space is completely filled, nor does it mean that there is no gap.

With that “full” in mind, now consider Flexbox. When do we think about or need flexibility? The answer is when we need to “fill” a container. With this kind of thinking, I return to figure painting. The finger is only at a specific position on the screen. To solve this problem, we can simply use position: Absolute; Or float: left; Those properties are done. And the thighs are “filling” the picture, and elasticity is important when we need to “fill” the container! To solve this kind of problem, we should think not about a local space, but about the distribution of space. How to allocate all the boxes in the container, if the space is too big, if the space is too small; On the mobile end, there are many different screen sizes, and the problem becomes how to deal with the space sometimes big and sometimes small.

As you can already imagine, the elastic box model was developed to make it easier to solve these problems. So let’s take a look at the inelastic box in these scenarios.

Percentage grid

See the Pen understanding-css-flexbox 1: percentage by Alpha Bao (@AlphaBao) on CodePen.

Above is the horizontal grid, written as a float and percentage. Since the height of one is set directly to different heights, it is obvious that the heights of the four cells are different. The same problem applies if the height of a grid changes because of its contents.

Also, there are four cells in the example, so set each cell to width: 25%; You can fill the parent container horizontally, and the size changes don’t matter. But if the data you want to render is dynamic, you can’t write it as a specific percentage. That is, the percentage of each element changes when the number of elements changes, so you need to modify the CSS.

These problems are due to the fact that there is no “elasticity” in such a box model, which allows the layout to be rendered the way we want it to be.

Flex grid

.container {
  display: flex;
}Copy the code

The elastic box model brings the Flexbox layout, like above, to the box that acts as a container: display: flex; The default is horizontal because flex-direction: row; It’s the default, so we’re not going to worry about it. Take a look at the most commonly used property, flex-grow.

flex-grow

See the Pen understanding-css-flexbox 2: flex-grow by Alpha Bao (@AlphaBao) on CodePen.

You can see that one of them is flex-grow: 2; , all other elements are 1, which means that these child elements will fill the container. They divide the container into several pieces. Element occupies a share, flex-grow: 2; Because its flex-grow value is twice that of the other elements. That is, flex-grow determines how the child element expands. In Flexbox’s fill/fill strategy, flex-grow affects how much the element expands. Note that this is a matter of allocating the space of the parent container, and that the size of the container changes, so the size of the child element depends on the amount of space left. It is not true that the larger the flex-grow, the larger the element.

flex-basis

The flex-basis property is the initial size of the element. In the previous example, only flex-grow was set, so the initial size is determined by the element’s contents. If the element has no contents, the size is zero.

See the Pen understanding-css-flexbox 3: flex-basis by Alpha Bao (@AlphaBao) on CodePen.

The default value of flex-basis is auto, which refers to the size of the element (this article refers to the horizontal length of the element, since the default value of flex-direction is row, which determines that the main axis is horizontal, That is, the children of the container are arranged horizontally) depending on the element’s length attribute or on its content. It could be a specific length or it could be a percentage.

.c3 {
  width: 15em;
  flex-basis: auto;
}Copy the code

The initial width is 15em, which can also be written as follows:

.c3 {
  flex-basis: 15em;
}Copy the code

It’s the same if you write it either way.

After calculating the initial size, proceed to “fill” the container based on how much space is left. If you only care about the remaining space, the flex-grow property mentioned earlier kicks in and causes the element to expand until the container is full.

flex-shrink

So we’ve been thinking about the case where we have more space, and now we’re thinking about the case where we don’t have enough space. Want to make clear above all, specific how can bring about space inadequacy.

See the Pen understanding-css-flexbox 4: flex-shrink by Alpha Bao (@AlphaBao) on CodePen.

As you can see, by setting the width or filling it with content, you can run out of space. Flex-shrink takes effect in this case. The initial size is calculated first, and the flex-shrink value is used to determine how to shrink each element. The larger the flex-shrink value is, the greater the shrink factor is relative to the other elements. The default flex-shrink value is 1, which means that each element shrinks to the same extent when space is insufficient without changing the value of this attribute. If it is 0, it does not shrink.

flex

Flex is a Shorthand for the above three (the property of this type of Shorthand is Shorthand properties).

.item {
  flex: none | [ <'flex-grow'> <'flex-shrink'>? || <'flex-basis'>]}Copy the code

See the Pen understanding-css-flexbox 5: flex by Alpha Bao (@AlphaBao) on CodePen.

Each of the above child elements is set flex: 1 1 100px; That is, the initial width is 100px, and if there is room left, each element is divided equally, if there is not enough space, each element is shrunk by the same amount. flex: 0 1 auto; Is the default value of the Flex property, indicating that it does not expand (if it does not expand, it will not fill up with free space), has a shrinkage factor of 1, and the length of the element along the main axis depends on the length value or element content.

As you can see from the examples above, the advantage of this strategy for allocating space is obvious in the parent container, where the size changes dynamically. This is the convenience brought by elasticity. Flex is the most common way of writing in real life development, and its content is the strategy of how to “fill” the container space, which is the most important part of Flexbox.

conclusion

This article only covers flex-grow flex-shrink flex-basis, and there is much more about Flexbox. Examples include flex-wrap, which determines how to wrap, which acts like float, and context-Content, which determines how elements are aligned in the main axis direction, Align-self determines the direction of the cross axis (this works in cases where the main axis is horizontal and the elements have different heights, for example). The property names are a little confusing, but they all expand around full and elastic. Once you understand the meaning of elasticity by combining the imagination of “filling” space with the purpose and method, you should be able to learn and use Flexbox relatively easily.

As you can see, this article is not about thighs. If you want to see “real” thighs, read Gu Long’s “Sentimental Swordsman Heartless Sword”, “Midnight Orchid”, “Everlasting Sword” and “Hsiao Eleven Lang”.

Further reading

  1. A Complete Guide to Flexbox
  2. A Visual Guide to CSS3 Flexbox Properties