Thinking about aligning both ends of css

Recently, I took a public class and talked about the alignment of CSS at both ends. I am going to write down my experience and record it.
Two ways to align both ends of CSS: (For the original text, see Baishu Dashen) http://www.cnblogs.com/PeunZhang/p/3289493.html#text-justify-demo
Method 1: Use text-align:justify
to see first code
html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Justify</title>
</head>
<body>
<div class="demo">
	<a class="link" href="#">1</a>
	<a class="link" href="#">2</a>
	<a class="link" href="#">3</a>
	<a class="link" href="#">4</a>
	<a class="link" href="#">5</a>
	<a class="link" href="#">6</a>
	<a class="link" href="#">7</a>
</div>
</body>

css

<style type="text/css">
    	*{margin:0;padding:0;}
		.demo{
		     text-align:justify;
		     text-align-last:justify;
		     line-height:0;
		     height:44px;
		}
		}
		.demo:after{
		     display:inline-block;
		     overflow:hidden;
		     width:100%;
		     height:0;
		     content:'';
		     vertical-align:top;
		}
		.demo a{
		     width:5%;
		     display:inline-block;
		     height:44px;
		     line-height:44px;
		     text-align:center;
		     border:1px solid #428cc8;
		     color:#666;
		     font-size:16px;
		     margin-bottom:5px;
		     border-radius:3px;
		     background-color: #fefefe;
		     background-image:-webkit-gradient(linear,left top,left bottom,color-stop(0,#fefefe),color-stop(1,#eee));
		     color:#666;
		     text-decoration:none;
		}
</style>

The text-align:justify property is fully compatible. Use it to achieve justify at both ends. You need to pay attention to adding [space/newline/tab] between modules to work. Similarly, to achieve text alignment, you need to use word-to-word alignment Add [space/newline/tab] in between to work.
However, after trying it, I found that setting text-align:justify did not achieve the effect of aligning both ends. Baidu later found that text-align is very arrogant, because it does not process a line of text, and it does not process a forced line break. The broken line and the last line are not processed.
Well, 1. Use text-align-last, but this is only supported by IE. (-moz-text-align-last for Firefox)
2. Use the :after selector to generate a line with an empty content block-level element with a width of 100%. Hence the above code. [align=center][/align]
Method 2: Use justify-content:space-between
to set the box model, set justify-content to space-between

.demo{
    display:-webkit-box;
    display:-webkit-flex;
    display:-ms-flexbox;
    display:flex;
    -webkit-box-pack:justify;
    -webkit-justify-content:space-between;
    -ms-flex-pack:justify;
    justify-content:space-between;
}

Thinking about aligning both ends of css

Guess you like