• How Flexbox Works – explained with big, colorful, animated gifs
  • Scott Domes
  • The Nuggets translation Project
  • Translator: linpu. Li
  • Proofreader: SQrthree, Xuzaixian

The elastic box model promises to solve many of the drawbacks of pure CSS (such as vertical alignment).

Well, it did deliver. But mastering this new way of thinking is no easy task.

So we’ll see how the elastic box model works in the form of a GIF so we can use it to build a better layout in the future.

The basic principle of the elastic box model is to make the layout intuitive and elastic.

To achieve this goal, it lets the container decide how to evenly distribute its children, including their size and spacing.

It’s all very well understood in principle. But let’s see what it looks like in practice.

In this article, we delve into the five most commonly used properties of the elastic box model. Find out what they do, how they are used, and what effect they have.

The first property: Display: Flex

Here is our sample page:

There are four divs of different sizes and colors, contained in a gray div container. Now, each div has a default property display: block, so each div block takes up the width of the entire line.

To use the elastic box model, we need to change the container to an elastic container. The change code is as follows:

#container {
  display: flex;
}
Copy the code

You can see that without changing much code, the div inside the container is displayed as inline. But behind the scenes, a lot has changed, because you give each block something called an elastic context.

Now you can start to change their position in this context, much easier than traditional CSS.

Second property: Flex Direction

The elastic box model container has two axes: the main axis and the cross axis, which default to look like this:

By default, every element in the container is arranged along the main axis from left to right. This is why, once display: flex is in effect, all blocks are arranged horizontally by default.

But flex-direction lets you rotate the spindle.

#container {
  display: flex;
  flex-direction: column;
}
Copy the code

There is one important difference here: Flex-direction: Column does not move blocks from the main axis to align on the cross axis, but instead shifts the main axis itself from horizontal to vertical.

Flex-direction also has two options: row-reverse and column-reverse.

The third attribute: Justify Content

Context-content controls the alignment of elements on the main axis.

Now, let’s dig a little deeper into the difference between principal and intersecting axes. First, go back to flex-direction: Row.

#container {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
}
Copy the code

Illustration-content has five optional values:

  1. Flex-start
  2. Flex-end
  3. Center
  4. Space-between
  5. Space-around

Space-around and space-between are the most intuitive. Space-between creates the same size interval between each block, but not between the container and the block.

Space-around creates a space of the same size on both sides of each block, meaning that the space between the outermost block and the container is exactly half the size of the space between the two blocks (the space generated by each block does not overlap, so it becomes twice the space).

One final note: Remember that precision-content works along the main axis, whereas flex-direction is used to change the main axis. This is important when you look at the next property.

Fourth property: Align Items

Align-items will be easy to follow if you have context-content.

As mentioned earlier, context-content works along the main axis, while align-items works on the cross axis.

First, reset flex-direction to row so that our axis looks like the one shown above.

Then, drill down to the align-items property, which has the following optional values:

  1. flex-start
  2. flex-end
  3. center
  4. stretch
  5. baseline

The first three values are exactly the same as justify-content, so they are skipped here.

But the next two values are a little different.

At stretch, each item takes up the entire cross axis, while at baseline, the line is aligned according to the bottom of the paragraph label.

Align -items: “stretch”, the height of each block must be set to “auto”, otherwise height will overwrite the effect of “stretch”.

For the baseline, be aware that if the paragraph tag is removed, it will be aligned at the bottom of each block, as follows:

To clarify the difference between a main axis and a cross axis, let’s combine precy-content and align-items to see how the axis varies with flex-direction:

With row, each block is arranged along a horizontal axis, and with column, they are arranged down a vertical axis.

Although these blocks can be centered horizontally or vertically in either case, the two cannot interconvert!

Fifth property: Align Self

Align-self allows you to manually set the alignment of a particular element.

It overwrites the align-items property for a block. All attributes of elements in the container default to auto, so each block uses the container’s align-items property by default.

#container { align-items: flex-start; } .square#one { align-self: center; } // Only this block will be centeredCopy the code

Let’s set the align-self property for two blocks and use align-items: Center and flex-direction: row for the rest to see what happens:

conclusion

Although we’ve only scratched the surface of the elastic box model, these attributes should be enough for basic alignment, or vertical alignment of your core content.

If you would like to see more GIF elastic box model tutorials, or if this tutorial has helped you, please click on the green heart below or leave a comment.

Thanks for reading!