CSS fully compatible multi-column uniform layout problem solving method

problem-solving does not consider compatibility, the topic of unrestrained, think of what to say, if you feel the problem in the CSS properties of the rare, hurriedly to cram it.

Constantly updated, constantly updated, constantly updated, important things to say three times.

6, fully compatible multi-column uniform layout problem

How to achieve the following multi-column uniform layout (the line in the figure to show the width of the container, not counting):

Law One:display:flex

The CSS3 flexible box (flexible box or Flexbox) is a layout that ensures that elements have a more appropriate arrangement when the page needs to accommodate different screen sizes and device types.

Of course, the flex layout is good for mobile, the PC side needs to be fully compatible, not enough compatibility, here is a bit too much to talk about.

Law II: With the help of pseudo-elements andtext-align:justify

Define the following HTML styles:

<p class= "Container" >    <p class= "Justify" >        <i>1</i>        <i>2</i>        <i>3</i>        <i>4</i>        <i>5</i>    </p></p>

We know that there is a text-align:justify that can be used to justify the effect on both ends.

text-alignThe CSS property defines how the inline content, such as text, aligns with its block parent element. Text-align does not control the alignment of the block element itself, only the alignment of its inline content.

text-align:justifyIndicates that the text is aligned to both sides.

At first I guess it can be implemented using the following CSS:

. justify{  text-align:justify;}. Justify i{  width:24px;  line-height:24px;  Display:inline-block;  Text-align:center;  border-radius:50%;}

The results are as follows:

Demo Poke Me

Without the expected results, and without realizing the so-called justify, find the reason for finding such an explanation in the consortium:

The last Horizontal alignment property is justify that it brings some of its own problems. The CSS does not describe how to handle hyphens, because different languages have different hyphenation rules. The spec did not attempt to reconcile some of the most likely imperfect rules, but simply not to mention the problem.

Well, I read the above a large paragraph of explanation or did not understand the above meaning, and then continue to verify, only to find the reason:

Although the text-align:justify property is fully compatible, to use it for justification, it is important to note that adding [space/Line breaks/tabs] between modules will work.

That is, each 1 -gap, at least a space or a newline or a tab to line.

OK, let's try updating the HTML structure with the same CSS:

<p class= "Container" >    <p class= "Justify" >        <i>1</i>        <i>2</i>        <i>3</i>        <i>4</i>        <i>5</i>    </p></p>

Try adding a newline character to the middle of each piece, and the result is as follows:

Oh, it's still not working.

Looking for the reason, it turns out the last element, then I found text-align-last this property, which text-align-last specifies how the last line of the aligned Word is aligned, and the property text-align-last only works if the property is text-align set to justify .

Try adding to the container text-align-last:justify :

. justify{  text-align:justify;  text-align-last:justify; Add this line}.justify i{  width:24px;  line-height:24px;  Display:inline-block;  Text-align:center;  border-radius:50%;}

Finally, we realized the multi-column uniform layout:

It's over? No, check text-align-last the compatibility:

But a look at compatibility, appalling, only ie8+ and the latest Chrome support text-align-last properties, that is, if you are not using ie8+ or the latest version of Chrome to watch this article, the above Demo in the open Codepen example is not evenly distributed.

Above said to use the text-align:justify implementation of multi-column layout, to cooperate text-align-last , but its compatibility is not good, really no way, in fact, there are some, using pseudo-elements with, do not need text-align-last attributes.

We class="justify" p add a pseudo-element to it:

. justify{  text-align:justify;}. Justify i{  width:24px;  line-height:24px;  Display:inline-block;  Text-align:center;  border-radius:50%;}. Justify:after {  content: "";  Display:inline-block;  position:relative;  width:100%;}

Removed text-align-last: justify , add a pseudo-element, the effect is as follows:

By setting the :after inline-block width of the pseudo 100% -elements, text-align: justify it is easy to fit the multi-column layout with the container. With a few more words hack code, you can achieve compatibility to ie6+, the most important is the code is not long, very good understanding.

So why use: after pseudo-elements can be implemented after the alignment?

The reason for this is that the first line is justified only if there is a second row, so here we need to make a false second line, and the following pseudo-element is just justify.

The final implementation topic is initially shown: