前几天在项目开发过程中需要实现一个列表两端对齐，想着在页面开发过程中也经常会有需要用到两端对齐布局的时候，就计划总结一下常见实现方式，与诸位交流。
可以先看看实例效果：两端对齐实现
点此查看完整代码 https://github.com/codingplayboy/web_demo/blob/master/css/justify-layout.html
百分比实现
首先最简单的是使用百分比实现，如下一个展示列表：
![]()
![]()
![]()
给该列表设置样式：
.percent-list {
width: 100%;
background: #f0f0f9;
list-style: none;
font-size: 0;
}
.percent-item {
display: inline-block;
width: 30%;
height: 60px;
margin-right: 5%;
border: 1px solid lightblue;
box-sizing: border-box; /* 削去border边框宽度的影响 */
}
效果如图：
这样当然很简单，而且也不会存在什么兼容性问题，但是其他问题还有很多：
-
定宽的列表，效果很难实现
-
如果内部img元素宽度不是100%且需要实现两端对齐，效果很难实现
-
如果列表项数量是动态的，效果不能实现
flex实现
第二种实现方式就比较先进了，除了需要学习flex相关知识，使用还是很简单的，实现两端对齐效果，关键点是在flex容器上使用justify-content属性，并将其值设为space-between;
Flex container
The parent element in which flex items are contained. A flex container is defined using the flex or inline-flex values of the display property.
Flex容器，是flex项目的父元素，flex容器通过声明display属性为flex/inline-flex值产生。
Flex item
Each child of a flex container becomes a flex item. Text directly contained in a flex container is wrapped in an anonymous flex item.
Flex项目，flex容器的每个直接子元素都是一个flex项目，当直接子元素是文本时，该文本被一个匿名flex项目包含。
The flex-direction property establishes the main axis.
The justify-content property defines how flex items are laid out along the main axis on the current line.
justify-content属性定义flex项目在当前行主轴线方向上的排布，而主轴由flex-direction属性定义。
这两个属性均在flex容器上定义。
更多关于flex知识请参考：developer.mozilla.org/en-US/docs/…，后续会对flex进行详细阐述。
如下一个列表结构
Flex两端对齐列表
1
2
3
4
5
我们首先在flex容器设置样式：
// 兼容将近所有智能手机
.flex-list {
display: -moz-box;
display: -webkit-box;
display: -webkit-flex;
display: -moz-flex;
display: -ms-flexbox;
display: -ms-flex;
display: flex;
-webkit-box-pack: justify;
-moz-box-pack: justify;
-ms-flex-pack: justify;
-webkit-justify-content: space-between;
-moz-justify-content: space-between;
-ms-justify-content: space-between;
justify-content: space-between;
}
在flex-item上设置display:inline-block;会使flex失效，于是最好声明：
.flex-item{
display:block
}
注：不可在flex项目上设置flex属性
效果如图：
text-align:justify实现
另外一种要介绍的是使用text-align:justyle;实现方式。
我们知道text-align:justify;效果是实现文字两端对齐,如。
默认是文字居中，如何实现文字两端对齐效果，这是个问题？
如何实现文字两端对齐效果，这是个问题？
效果如图：
那么我们可以利用该属性实现行内元素两端对齐嘛？答案是肯定的，但是我们得进行额外的处理。
一个设置justify状态下的列表：
justify下列表
1
2
3
4
5
样式如下：
.list {
width: 100%;
/*height: 90px;*/
background: #f0f0f9;
font-size: 0;
text-align: justify;
text-justify:distribute-all-lines;/* ie6-8 */
}
.item {
width: 60px;
height: 90px;
display: inline-block;
*display: inline;/* ie */
*zoom: 1;
box-sizing: border-box;
-moz-box-sizing: border-box; /* Firefox */
-webkit-box-sizing: border-box; /* Safari */
border: 1px solid lightblue;
}
效果如图：
可以看到并没有两端对齐效果，这是因为使用text-align:justify;实现两端对齐，需要特殊的处理，我们需要在列表项最后面加一个辅助元素，样式如下：
.justify-fix {
width: 100%;
height: 0;
display: inline-block;
*display: inline; /* ie */
*zoom: 1; /* ie */
visibility: hidden;
}
比如，我们列表末尾加一个辅助li元素：
justify两端对齐列表-v1（vertical-align: baseline;默认值）
1
2
3
4
4
-
可以看到效果：
我们看到，两端对齐效果是有了，可是，也有问题，纵向轴线没有对齐，这是因为vertical-align属性默认是baseline值，效果是子元素的基线与父元素的基线对齐。而一个容器元素的基线是指其包含的最后一个行内元素的基线。
于是我们可以看到实际效果是各个列表项的最后一个行内元素1，2，3，5的基线对齐。 那么该怎么办呢，我们只需要设置列表vertical-align非baseline就可以完美实现效果。
justify两端对齐列表-v2（使用vertical-align: top/bottom/middle;）
1
2
3
4
5
-
样式：
.align-top {
vertical-align: top;// bottom/middle
}
效果如图：
实现两端对齐的方式还有多种多样，欢迎诸位一起交流学习，本次关于两端对齐布局总结就结束了。
两端对齐布局与text-align:justify
