Shulou(Shulou.com)06/01 Report--

This article will explain in detail how CSS3 uses column multi-column layout to achieve horizontal page sliding and page flipping interaction. The editor thinks it is very practical, so I share it with you for reference. I hope you can get something after reading this article.

1. CSS3 column multi-column layout

CSS3 column multi-column layout supports the earlier CSS3 layout, which is currently supported by IE10+ and all other modern browsers. IE browsers do not need private prefixes. Although FireFox and Chrome do not need them now, considering the mobile side and the situation that some users' browsers may not be upgraded in time, the-webkit- and-moz- prefixes cannot be omitted at present.

Generally speaking, the following attributes are commonly used:

Column-width: width of each column

Column-count: the ideal number of columns, pay attention to the wording here, is "ideal", this word is very subtle, you can understand more

Column-gap: horizontal gap between columns

Column-rule: split lines, formal rules or something like border,column-rule is actually an acronym, and column-rule-width,column-rule-style,column-rule-color and so on, just like the border attribute.

Column-fill: the effect is unknown and it is not commonly used. The default value is balance, which means that each column is coordinated. You can also use the value auto to indicate that each column is populated sequentially. I don't know the difference.

There is also an abbreviated attribute called columns, which is actually an acronym for column-width and column-count:

Columns: 120px; / * column-width: 120px; column-count: auto * / columns: auto 120px; / * column-width: 120px; column-count: auto * / columns: 2; / * column-width: auto; column-count: 2 * / columns: 2 auto; / * column-width: auto; column-count: 2 * / columns: auto; / * column-width: auto; column-count: auto * / columns: auto auto; / * column-width: auto; column-count: auto * /

If you look at some articles or demo hints, it is basically the following routine, in which the container specifies a large width, and then it is divided into several columns by setting the column-count property, for example, if it is:

Column-count:4

It will look like the following figure (there will be differences in different browser details):

If it is:

Column-count:3

Then:

If it is:

Column-count:2

Then:

It seems to be very powerful, and it is not difficult to understand. However, over the years, I have hardly seen any similar use in any project.

Column multi-column layout and flex elastic layout basically appear at the same time, in terms of compatibility, column multi-column layout has always been more stable and more compatible, while flex elastic layout before and after several versions, until now some mobile devices support is still not good, but the fate of the two is diametrically opposite, column multi-column layout rarely people pay attention to, and flex elastic layout is unboiled water. During the interview, even if the interviewer has not used flex flexible layout in the actual project, he will talk about it from time to time, as if the flex layout is out of touch with the times, in fact, it is completely unnecessary, each CSS attribute has its potential and value, to tap its intrinsic value rather than simply being trapped in Lushan is what you really want to see.

Back here, if we only see the conventional performance indicated above, we will inevitably feel that the multi-column layout seems to be not so widely used, because only typesetting like newspapers and magazines need multi-column layout. In web, the width is often limited and the height is infinite. Generally speaking, the so-called multi-column layout refers to the split width, but think about it, the width is not enough. How can you share the scene again? The combination of these factors leads to the idle layout of multi-column.

But if we tap the potential of multi-column layout, we will find that it can actually achieve more layout or effect than it seems.

The horizontal swiping effect of the page here is achieved by using the CSS3 column property.

Second, the interesting space usage characteristics of CSS3 column and the realization of horizontal sliding browsing effect.

Margin is also included in the spatial calculation.

What does this mean? For example, in the example of the above four columns, if we reduce the text content, we will find that this may be the case, in both Chrome and IE browsers, it looks as if only three columns are displayed:

Instead of showing only three columns, it is because the schematic HTML structure is as follows:

Words.

There is a margin spacing of 1em up and down by default, so we look like the fourth column is vacant, but we are actually

The margin-bottom of the element is occupied, if we reset it using the following CSS

The margin value of the label, you will find that, as expected, the four columns show:

.box p {margin: 0;}

Column layout height is also an important limitation.

The above several column-count signals are set a width 600px, the height is the default auto, therefore, the column performance is very clever, anyway, the height is infinite, no matter how many columns you set, I can adjust the height to achieve.

However, if we also set a fixed value for height, such as height 60px, then a lot of interesting things will happen.

If only column-count is specified, at least within the visual size range of the container element, the number of columns is still set, such as column-count:3. Although visually there are far more than 3 columns, the container visual size range is 3 columns, as shown in the screenshot below:

Column-width will let column-count pass by.

What does this mean? For example, the following CSS:

.col4 {width: 600px; column-count: 4; column-width: 200px;}

Obviously there is a contradiction here, each column width 200px, a total of 4 columns, even without considering the gap between each column, at least need the width of 800px, but our container set the width of only 600px, how to do?

That is to say, column-count ignores ineffectiveness, don't think it's unreasonable, and don't be unfair and say why column-count is sacrificed instead of other attributes? That's because column-count is born to sacrifice, because its semantic interpretation is "the ideal number of columns." the so-called ideal is that you have to sacrifice when you should.

In fact, the final width of each column here is not 200px, if I calculate correctly, in the case of no style reset, it should be 292px.

Perfect paging can be achieved by simultaneously limiting the height and width.

The CSS code is as follows:

.example {height: 120px; width: 100px; column-width: 100px;}

If we treat this small container named .example of 100px*120px as one page of content, then all the content in our container will be perfectly divided into one-page horizontal rendering, as shown in the following screenshot:

This is the key to horizontal swiping through our books. At this point, if we have the following overflow restriction on the parent element:

.overflow {width: 100px; hidden;}

At this point, a window that will always display only one page width is formed, and then the following things are simple. By JS some touch-related events and controlling the translateX displacement of our .example element, we can achieve the effect of horizontal sliding screen browsing the novel content shown at the beginning.

Perfect flowers!

The fourth point above "height and width perfect limit" is the starting point Chinese mobile web app reading page horizontal reading layout implementation principle, the difference is the width and height size is not the same, I do not know to repeat. By the way, here is a short story from the time of development:

Originally, the sliding page is achieved by changing the original scrollLite value of the container, rather than translateX displacement, the advantage is not to worry about boundary judgment. However, it was later found that there were two deficiencies:

1. Under individual Android devices, sliding is not very smooth.

two。 This deficiency is the most fatal deficiency, that is, there is a very serious bug in the layout of the version CSS3 column after chrome55. After the container overflow:hidden/auto, the next column at the beginning of the third column will not be displayed directly.

So, finally, we choose to use translateX for displacement.

Not to mention, many users do use horizontal browsing mode, which may be consistent with the native APP interaction.

On "CSS3 how to use column multi-column layout to achieve horizontal page skimming interaction" this article is shared here, I hope the above content can be of some help to you, so that you can learn more knowledge, if you think the article is good, please share it out for more people to see.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.