Align CSS on both sides

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 a property 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 of the HTML structure, <li> There is a newline between the elements, so you do not need to add any extra white space characters

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"

Usetext-align-lastYou can achieve both ends of the alignment, but the compatibility is not good. By setting a pseudo element to the parent element:after, and set the pseudo-elementinline-block, and set width 100%, which is equivalent to pseudo-elements:afterBe squeezed into 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>

column-rule easy to implement 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>

Align CSS on both sides