Detailed explanation of the problems and solutions encountered in flex multi-column layout

Flex layout is undoubtedly simple and easy to use. It makes our layout simpler and faster. However, when using flex for multi-column layout, I believe many people will encounter the following situation:

This happens because we use justify-content: space-between; the reason for using this setting is that we don't need to specifically calculate the spacing between elements, flex will calculate it for us, but because of this, when we have insufficient elements in the next row, the above situation will occur. Then the problem is clear, it is caused by insufficient elements in the last row, then we can think of adding an empty element to the last row to take up space, which can perfectly solve the above problem:

Here we use pseudo-elements to achieve placeholders. Note that pseudo-elements only need to set width, never height. The details are as follows:

.container::after{
      content: '';
      width:320px;
    }

The effect is as follows:

However, we will find that in display development, we will not only encounter three-column layouts, but also four-column and five-column layouts. Obviously, the above approach will not work at this time. So how to solve it? The solution is also very simple. The principle is the same. Use empty elements to occupy space. This time we will not use pseudo-elements. We use real DOM elements to operate:

Write a row of empty elements in advance: as follows

<div class="container">
    <div class="box">1</div>
    <div class="box">2</div>
    <div class="box">2</div>
    <div class="box">2</div>
    <div class="box">2</div>
    <div class="box">2</div>
    <div class="box">2</div>
    <div class="box">2</div>
    <div class="box">2</div>
    <div class="box">2</div>
    <!-- Dividing line (below is the empty element I wrote in advance) -->
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
  </div>

Corresponding CSS settings:

div:empty{
      height: 0;
      width:160px;
      border:none;
    }

The effect is as follows:

At this time, we will find that no matter how many columns there are, we can perfectly solve our initial problem

The above is the full content of this article. I hope it will be helpful for everyone’s study. I also hope that everyone will support 123WORDPRESS.COM.