3 ways to achieve justification for CSS

Using Text-align:justify
The Text-align:justify property is fully compatible and uses it to justify justification, and you need to be aware of adding [space/newline characters/tabs] between modules to work, as well as the need to add [space/newline characters/tabs] between words to work.

HTML code

<p> elements within the module are &nbsp; delimited, only WebKit and gecko kernel browsers are supported </p>
<div class= "Demo" ><a class= "link" href= "#none" >10 yuan </a>&nbsp;<a class= "link" href= "#none" >20 yuan </a>&nbsp;<a class= "link" href= "#none" >30 yuan </a>&nbsp;<a class= "link" href= "# None ">50 </a>
</div>
<p> the elements within the module are line breaks </p>
<div class= "Demo" >
<a class= "link" href= "#none" >10 yuan </a>
<a class= "link" href= "#none" >20 yuan </a>
<a class= "link" href= "#none" >30 yuan </a>
<a class= "link" href= "#none" >50 yuan </a>
</div>
<br/>
<p> between elements within the module is spaces </p>
<div class= "Demo" >
<a class= "link" href= "#none" >10 yuan </a> <a class= "link" href= "#none" >20 yuan </a> <a class= "link" href= "#none" >30 </a> <a class= "link" href= "#none" >50 yuan </a>
</div>
The elements within the <p> module are not delimited, justify does not work </p>
<br/>
<div class= "Demo" ><a class= "link" href= "#none" > Options 1</a><a class= "link" href= "#none" > Options 2</ A><a class= "link" href= "#none" > Options 3</a><a class= "link" href= "#none" > Option 4</a></div>
*{margin:0;padding:0;}

/*
Description

1.IE in order to implement a single line in the block to justify the use of its private properties text-align-last:justify, text-align-last to be effective, you must first define text-align as justify
2.line-height:0 Resolve extra white space at the bottom of the standard browser container
*/
. demo{
text-align:justify;
text-align-last:justify;
line-height:0;
height:44px;
}
/*
Description
After the module uses [line break] or [spaces], the WebKit browser will cause the last module to have extra white space, and font-size:0 can be used to clear the space
*/
@media all and (-webkit-min-device-pixel-ratio:0) {
. demo{
font-size:0;
}
}
/*
Description
1.text-align-last:justify currently only has IE support, standard browsers need to be used. Demo:after pseudo class simulate similar effect
2.opera browsers need to add vertical-align:top to completely solve the extra blank at the bottom
*/
. demo:after{
Display:inline-block;
Overflow:hidden;
width:100%;
height:0;
Content: ';
Vertical-align:top;
}
. Demo a{
width:20%;
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;

Using Box-pack:justify

Box-pack is a new property of the CSS3, dependent on the Display:box (old version of the elastic layout), affected by the box-orient, Box-pack determines how the child tags are horizontally aligned, optional values have start | End | Center | Justify. Using box-pack:justify to achieve justified alignment is simple and less code. In order to move forward, the Display:flex (new version of the elastic layout) also written in.
If it is done based on WebKit kernel WebApp development and Winphone IE10 and above.
HTML code

<div class= "Demo" >
<a class= "link" href= "#none" >10 yuan </a>
<a class= "link" href= "#none" >20 yuan </a>
<a class= "link" href= "#none" >30 yuan </a>
<a class= "link" href= "#none" >50 yuan </a>
</div>

CSS Code

*{margin:0;padding:0;}
/*
Description
Display:box defines the layout as a box model, you can use the Box-pack:justify property under the box model
*/
. 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;
}
. Demo a{
width:20%;
Display: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;
}

Use column (multiple-column layout)

Column is also a CSS3 property, meaning a multiple-column layout, using column to achieve justified alignment is also very simple, you need to set the number of modules and column number of columns consistent, but its automatic adaptation with the use of box-pack is somewhat different, not very standard, The spacing between columns and columns is temporarily undefined as a percentage. It is gratifying that support for all advanced browsers and IE10 is also good, and IE9 and the following versions do not support, WebApp development, the need for compatible Winphone7 mobile phone (IE9), can give full play to the strong role of column.

HTML code

<div class= "Demo" >
<a class= "link" href= "#none" >10 yuan </a>
<a class= "link" href= "#none" >20 yuan </a>
<a class= "link" href= "#none" >30 yuan </a>
<a class= "link" href= "#none" >50 yuan </a>
</div>
CSS Code
*{margin:0;padding:0;}
/*
Description
1.column-count defines the number of columns for an object, with 4 modules in the example, then the definition is 4 columns
2.column-gap defines the spacing between columns and column in an object, and the spacing cannot be set to a percentage, which is not flexible enough
*/
. demo{
-webkit-column-count:4;-moz-column-count:4;column-count:4;
-webkit-column-gap:20px;-moz-column-gap:20px;column-gap:20px;
}
. Demo a{
Display: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;
}