简介
在前端开发中，我们常常需要对网页进行布局，而CSS中的display属性可以帮助我们控制元素的排列方式。其中，display:flex可以设置一个元素为flex容器，通过justify-content属性控制主轴方向上的对齐方式。本文将介绍如何利用display属性及其相关属性实现两端对齐的效果。
display:flex介绍
display:flex是CSS3中新增的一种布局方式，通过将一个容器设置为flex容器，其内部的子元素将可以被灵活地排列。在flex容器中，存在两个重要的概念：主轴和交叉轴。主轴是元素的排列方向，而交叉轴则是垂直于主轴的方向。默认情况下，主轴的方向为水平方向，即从左至右排列。
主轴方向上的对齐方式
在flex容器中，我们可以使用justify-content属性来控制主轴方向上的对齐方式。该属性可以取多个值，常用的有以下几种：
flex-start: 默认值，子元素沿着主轴方向靠左排列；
flex-end: 子元素沿着主轴方向靠右排列；
center: 子元素沿着主轴方向居中排列；
space-between: 子元素沿着主轴方向平均分布，相邻元素间距相等；
space-around: 子元素沿着主轴方向平均分布，元素两侧间距相等。
实现两端对齐
以上的对齐方式中，只有space-between和space-around可以实现两端对齐的效果。但是，这两种方式在元素数量较少时，可能会导致元素之间的间距过大或不够合理。因此，我们需要借助其他属性来实现两端对齐的效果。
在使用flex布局时，我们还可以通过设置margin-left:auto和margin-right:0的方式，让最后一个元素靠右排列。具体来说，我们可以将倒数第二个元素的margin-right设置为auto，这样最后一个元素的左侧就会自动填充剩余空间，从而实现两端对齐的效果。
.container {
display: flex;
justify-content: space-between;
}
.container > *:nth-last-child(2) {
margin-right: auto;
margin-left: 0;
}
上述代码中，我们首先将容器设置为flex容器，并将对齐方式设置为space-between。接着，通过选择器`container > *:nth-last-child(2)nth-last-child选择器介绍
上文中提到的:nth-last-child()选择器是CSS3中新增的一种选择器，用于匹配某个元素在其父元素中倒数第n个子元素。它的语法如下：
:nth-last-child(n)
其中，n表示要匹配的子元素在父元素中倒数的位置。例如，:nth-last-child(2)表示匹配倒数第二个子元素。在实际使用中，我们还可以通过odd和even关键字来匹配奇数和偶数位置的子元素。
示例代码解析
上述代码中，我们首先将容器设置为flex容器，并将对齐方式设置为space-between。接着，通过选择器.container > *:nth-last-child(2)选中倒数第二个子元素，即倒数第二个元素的右侧将被自动填充剩余空间。最后，我们将该元素的margin-right设置为auto，将margin-left设置为0，从而实现了两端对齐的效果。
值得注意的是，由于最后一个元素的左侧会被自动填充剩余空间，因此它的宽度可能会发生改变。如果我们希望最后一个元素的宽度保持不变，可以将它的flex-shrink属性设置为0，防止它在空间不足时被缩小。例如：
.container > *:last-child {
flex-shrink: 0;
}
总结
display属性是CSS中非常重要的一个属性，可以帮助我们控制元素的排列方式。在使用flex布局时，我们可以通过设置justify-content属性控制主轴方向上的对齐方式，从而实现各种排列效果。如果需要实现两端对齐的效果，可以借助margin-left:auto和margin-right:0的方式，通过选择器:nth-last-child()选中倒数第二个元素，将其margin-right设置为auto，从而实现两端对齐的效果。