Align CSS on both sides

Previous words

Justification is very common in the production of navigation Nav. This article will detail 3 ways to implement CSS Justification

Flex

Flexible box model Flex, as a powerful, resilient layout, can hold most of the layout effects, including both ends of the alignment. You can use the axis justify-content -aligned justification propertiesspace-between

Justify-content:space-between;

If you want to consider the compatibility of flex three versions, use the following code

Note ie9-Browser does not support

. justify-content_flex-justify{    -webkit-box-pack:justify;    -ms-flex-pack:justify;    -webkit-justify-content:space-between;    Justify-content:space-between;} <style>body{margin:0;}    Ul{margin:0;padding:0;list-style:none;}. list{width:200px;overflow:hidden;border:1px solid gray;background-color:lightgreen;line-height:30px;}. In{background-color:lightblue;padding:0 10px;}. Display_flex{display:-webkit-box;display:-ms-flexbox;display:-webkit-flex;display:flex;}. Display_flex > *{display:block;}. Justify-content_flex-justify{-webkit-box-pack:justify;-ms-flex-pack:justify;-webkit-justify-content: Space-between;justify-content:space-between;} </style><ul class= "list Display_flex justify-content_flex-justify" >    <li class= "in" > Content </li >    <li class= "in" > Style </li>    <li class= "in" > Behaviors </li></ul>

Text-align

Horizontal alignment text-align itself has an attribute value that is justified justify . However, it is important to note that you use it for justification, and you need to be aware that adding white space characters (including spaces, line breaks, tabs) between elements works. Because there are line breaks between elements in the HTML structure, <li> there is no need to add extra whitespace

But just like this, the element cannot achieve the justification effect

The element must occupy a full line, as shown below. A full line of elements can be justified and not fully occupied

"Text-align-last"

Obviously, the above is not a requirement, then you need to use text-align-last the attribute, which is used to specify how the last line of the justified

Then replace the attribute with the text-align text-align-last . However, to be compatible with IE browser, you need to settext-align:justify

[Note]safari browser, IOS, androis4.4-browser does not support

<style>body{margin:0;}    Ul{margin:0;padding:0;list-style:none;}. list{width:200px;overflow:hidden;border:1px Solid Gray;background-color:lightgreen;line-height:30px;text-align: Justify;text-align-last:justify;}. In{background-color:lightblue;padding:0 10px;display:inline-block;} </style><ul class= "List" >    <li class= "in" > Content </li>    <li class= "in" > Style </li >    <li class= "in" > Behaviors </li>  </ul>

"After pseudo element"

It text-align-last can be used for both ends of the alignment, but is not very compatible. By setting a pseudo element to the parent element :after and setting the pseudo element, inline-block and setting the width 100%, the pseudo-element :after is squeezed to the second row. So that the original element fills the first line, triggering the effect of justification

It is important to note that because whitespace is parsed into newline, you can solve the extra line-wrapping problem by setting the height of the parent element height and hiding the overflow.

<style>body{margin:0;}    Ul{margin:0;padding:0;list-style:none;}. list{width:200px;height:30px;overflow:hidden;border:1px solid gray;background-color:lightgreen;line-height:30px; Text-align:justify;}. In{background-color:lightblue;padding:0 10px;display:inline-block;}. List:after{content: ""; width:100%;d Isplay:inline-block;} </style><ul class= "List" >    <li class= "in" > Content </li>    <li class= "in" > Style </li >    <li class= "in" > Behaviors </li>  </ul>

Column

columna similar effect can be achieved with multi-column layouts. column-countdefines the number of columns for an element, with 3 child elements in the example, so it is defined as 3 columns. It is particularly important to note that this requires that the element be set to the block element before it takes effect.

Note ie9-Browser does not support

<style>body{margin:0;}    Ul{margin:0;padding:0;list-style:none;}. list{width:200px;overflow:hidden;border:1px Solid Gray;background-color:lightgreen;line-height:30px;text-align: Center;}. Col3{-webkit-column-count:3;-moz-column-count:3;column-count:3;}. In{background-color:lightblue;padding:0 10px;display:block;} </style><ul class= "List col3" >    <li class= "in" > Content </li>    <li class= "in" > Style </ li>    <li class= "in" > Behaviors </li>  </ul>

If a vertical bar is required between the child elements and the vertical bar height is the same as the height of the child element, it is column-rule easy to implement the requirements

<style>body{margin:0;} Ul{margin:0;padding:0;list-style:none;}. list{width:200px;overflow:hidden;border:1px Solid Gray;background-color:lightgreen;line-height:30px;text-align: Center;}. Col3{-webkit-column-count:3;-moz-column-count:3;column-count:3;}. COL-RULE{-WEBKIT-COLUMN-RULE:1PX Solid black;-moz-column-rule:1px solid black;column-rule:1px solid black;}. In{background-color:lightblue;padding:0 10px;display:block;} </style><ul class= "list col3 col-rule" > <li class= "in" > Content </li> <li class= "in" > Style </l I> <li class= "in" > Behaviors </li> </ul>