Elastic box model (detailed)

Summary

Regarding the elastic box model, there are many attributes, and the values of the attributes are also relatively complicated, so it seems to be more difficult. It seems that you have mastered it when you always study, and some attributes will not be used if you don’t use it slowly.

In this article, only to understand the properties of the elastic box model, but not to list the values of all properties.
The point is to understand, not to memorize.

1. Create flexbox

Everyone should know that we should use display:flex to create a flex box.
But there is actually another way to create it: display:inline-flex .

At first glance, this attribute is similar to display:block and display:inline-block.
In fact, the effect is the same, that is, whether the created box is displayed as a block-level element or an inline block element .

<style>
  .box{
      
      
    display: flex;
    height: 100px;
    border: 1px solid black;
  }
  p{
      
      
    width: 100px;
    height: 50px;
    background-color: blue;
    margin-right: 10px;
  }
</style>
<body>
    <div class="box">
      <p></p>
      <p></p>
      <p></p>
      <p></p>
      <p></p>
    </div>
</body>

The effect is like this:

insert image description here

<style>
  .box{
      
      
    display: inline-flex;
    height: 100px;
    border: 1px solid black;
  }
  p{
      
      
    width: 100px;
    height: 50px;
    background-color: blue;
    margin-right: 10px;
  }
</style>
<body>
    <div class="box">
      <p></p>
      <p></p>
      <p></p>
      <p></p>
      <p></p>
    </div>
</body>

insert image description here

If you don’t understand here, you can refer to the difference between block-level elements and row-level elements.

2. Arrangement direction (flex-direction)

It can be seen that after the above box is set as a flexible box, even if the elements inside the box are block-level elements, they are still arranged in order.

That is to say, in the flexible box, no matter what elements and characteristics the elements have, they must be arranged in order obediently. So here is a question, can we modify the arrangement of these elements?

For example, what is the arrangement in my box?
insert image description here

Or how my boxes are arranged.
insert image description here
That is definitely possible. Here we only need to set the flex-direction attribute for the elastic box
. The value of this attribute is not listed here. If you are interested, you can try it yourself.

3. Newline (flex-wrap)

For the above situation, we imagine a scene. If we set the width of the elastic box, we also set the width for each element inside.
What happens if the boxes are arranged in order, but the width of the box is not enough, will the elements inside pop out? Or will it automatically change the line?

The answer is that the box will squeeze all the elements inside so that the elements do not exceed the parent element.
insert image description here
But if we add the line-wrap attribute flex-wrap to the elastic box , the elements inside will automatically wrap.

As for whether you want the line break to be above or below, you can try the attributes here by yourself, so I won’t list them here.

4. Adjust the main axis content (justify-content)

For an elastic box that has already set flex-direction, our effect looks like this:
insert image description here
it is displayed to the left in the arrangement direction.
But if the effect I want is like this:

or these few looks:

of course it is also achievable! The justify-content attribute is used to set the position of the element on the main axis.
And the value of this attribute can also achieve more effects than the above.

5. Adjust the vertical axis content (align-items)

If we set the height of the elastic box a little larger, the effect we display looks like this:
insert image description here
what if I want to display it in these ways?

We can do it through the align-items attribute, and this attribute is used to determine the element position of the vertical axis (the axis perpendicular to the main axis direction).

6. Adjust vertical content (align-content)

Now we think about a question, are the two attributes align-items and justify-content the same except for the different axes?

In fact, if you think about it carefully, the effects of the two are different. The former only determines the starting position of the arrangement on the vertical axis.
It cannot determine the effect of the arrangement in the main axis direction like the latter.

So having a property on the vertical axis has the same effect as justify-content: align-content

With this attribute, you can arrange your elements like this:
insert image description here
it can also be like this:

it can also be like this:

so here we need to distinguish between the two attributes of align-items and align-content

7. Elastic elements

All the properties mentioned above are for the flexible box, or it can be said that it is for all the elements in the flexible box, no matter what the property is, everyone can adapt together.

If we want to give some privileges to a certain elastic element, this is also operable. Here I use a table to display these three attributes.

Remember, these properties are not css written in flexbox. It is written in the css attribute of an elastic element

Attributes	effect	Defaults
flex-grow	When the box has extra space, the ratio of the current element to increase relative to other sibling elements	0
flex-shrink	When the box space is not enough, the ratio of the current element to be reduced relative to other sibling elements	1
flex-basis	You can set the element box size of the elastic element	auto