Example code for CSS columns to achieve two-end alignment layout

Example code for CSS columns to achieve two-end alignment layout

1. Going around in circles

After going around in circles, I finally found that the easiest way to achieve a justified layout is to use CSS columns.

For example, if we want to align the elements of three columns at both ends with a 30px gap in the middle, the CSS code is:

.container {
    columns: 3 30px;
}

Ding Dong, it's over, game over~

It's ridiculously simple.

Don't doubt it, take a look at an example of real-time rendering:

<div class="container">
    <div class="zhang"></div>
    <div class="xin"></div>
    <div class="xu"></div>
</div>
.container {
    columns: 3 30px;
}
.container > div {
    padding: 50px;
    background: deepskyblue;
}

The real-time rendering effect is as follows

2. Advantages and disadvantages of columns implementation

advantage

Compared with the alignment effect of space-between values ​​in Flex and Grid layouts, the biggest advantage of using CSS columns layout is that it protects the original display calculation value of HTML elements, in addition to requiring less code.

For example, by default in the browser, <li> elements will have bullet points, such as dots, or numerical sequences.

If you use Flex layout or Grid layout, you need to set display:flex or display:grid . If you change the original display:list-item calculated value, the dots or numerical numbers will disappear.

For this advantage, I made a demo, you can click here: demo of retaining list-style-type and aligning columns at both ends

It can be seen that <li> element child elements maintain the alignment effect, and the default dot symbol of the <li> element itself is also retained, as shown in the following figure.

This is something that Flex Layout and Grid Layout cannot easily achieve.

shortcoming

It is suitable for the alignment effect of single-line elements. If the list elements have many rows, the columns layout is not easy to handle. First, the flow of the list is prioritized in the vertical direction. Second, it is easy to have unexpected scenarios where the list is divided vertically.

3. Conclusion

Although it is not practical to use CSS columns to achieve the layout effect at both ends in actual development, it still has many limitations.

The only suitable scenario is when the layout effect at both ends is achieved without changing the display value. Although such scenarios are relatively rare, there are so many actual development projects and thousands of usage scenarios that it is hard to guarantee when you will encounter them. At this time, using just a few letters such as columns:3 30px can achieve an exquisite layout effect. Isn't it great!

In fact, technology is like this. There are very few APIs that are useless and completely useless. Their existence has a reason and their appearance is valuable, but their usage scenarios are to deal with atypical scenarios.

Learn it, understand it, and you may not see the results in a short period of time, but as project experience accumulates, you will definitely encounter suitable usage scenarios. Others will still have a headache about how to achieve it and continue to search on Google, but you can achieve such a need in a flash of time and write a few lines of code. That feeling will make you addicted. What is it like? It is the feeling of being the controller of the technology world, overlooking the numerous codes, and being second to none in the code world. In essence, it is a feeling of controlling power and being a technical expert.

Therefore, although CSS columns have a good chance of being used to implement layout at both ends, their own value is not low.

Well, this article is not very technically difficult, it is mainly to share some layout tips.

This article address: https://www.zhangxinxu.com/wordpress/?p=9429

This is the end of this article about how to achieve the justified layout effect with CSS columns. For more information about justified layout with CSS columns, please search for previous articles on 123WORDPRESS.COM or continue to browse the related articles below. I hope you will support 123WORDPRESS.COM in the future!

<<:  How to use MyCat to implement MySQL master-slave read-write separation in Linux

>>:  Complete step-by-step record of MySQL 8.0.26 installation and uninstallation

Recommend

Vue uses better-scroll to achieve horizontal scrolling method example

1. Implementation principle of scrolling The scro...

Detailed explanation of MySQL information_schema database

1. Overview The information_schema database is th...

Docker installation steps for Redmine

Download the image (optional step, if omitted, it...

How to implement a multi-terminal bridging platform based on websocket in JS

Table of contents 1. What to debug 2. Features of...

Q&A: Differences between XML and HTML

Q: I don’t know what is the difference between xml...

The whole process of IDEA integrating docker to deploy springboot project

Table of contents 1. IDEA downloads the docker pl...

JS implements a detailed plan for the smooth version of the progress bar

The progress bar is not smooth I believe that mos...

Implementation code of Nginx anti-hotlink and optimization in Linux

Hide version number The version number is not hid...

Detailed explanation of JavaScript state container Redux

Table of contents 1. Why Redux 2. Redux Data flow...

vue+tp5 realizes simple login function

This article example shares the specific code of ...

How to set the page you are viewing to not allow Baidu to save its snapshot

Today, when I searched for a page on Baidu, becaus...

Detailed explanation of various join summaries of SQL

SQL Left Join, Right Join, Inner Join, and Natura...

How to solve the problem of forgetting the root password of Mysql on Mac

I haven't used mysql on my computer for a lon...

5 JavaScript Ways to Flatten Arrays

Table of contents 1. Concept of array flattening ...