text-align是CSS中常用的一个属性，它用于指定元素内文本内容的对齐方式。对于一般的文本内容，我们通常会将其左对齐、居中对齐或右对齐，但是text-align属性还可以实现一些比较独特的排版效果，比如交错排列。

什么是交错排列？

交错排列是指将一段文本内容分成若干行或若干列，并且每行或每列的文字方向呈现出左右交错的效果。交错排列以其特殊的排版方式，在一些设计中起到了非常独特的效果。

那么如何利用text-align属性实现交错排列呢？下面让我们通过一些实例来具体了解一下。

方法一：利用pseudo元素

利用伪元素:before或:after可以在元素内创建出一个模拟的块级元素，这样我们就可以对这个模拟元素进行文字对齐操作，进而达到交错排列的效果。

代码如下：

```

p {

position: relative;

padding-left: 20px;

font-size: 16px;

line-height: 1.5;

p:before {

content: '';

position: absolute;

top: 0;

left: -20px;

width: 20px;

height: 100%;

background-color: #ffcc66;

p:nth-child(odd) {

text-align: right;

p:nth-child(even) {

text-align: left;

```

在上述代码中，我们使用了:before伪元素来创建了一个宽度为20px的带有背景色的元素，接下来使用了nth-child选择器来选中奇数行和偶数行，并针对这两种选择结果分别进行了左右对齐的文字排版。

运行结果如下图所示：

![text-align交错排列示例一]()

不难看出，选取不同颜色的文本内容进行排版，最终呈现出了左右交错的效果，特别是纯色背景的使用，更加突出了交错排列的效果。

方法二：利用flexbox布局

flexbox是一种非常流行的CSS布局方式，我们可以借助其强大的文本分布能力，来实现交错展示的效果。

代码如下：

```

.container {

display: flex;

flex-wrap: wrap;

justify-content: space-between;

.item {

flex-basis: 30%;

margin-bottom: 20px;

text-align: center;

.item:nth-child(odd) {

transform: translateX(20%);

.item:nth-child(even) {

transform: translateX(-20%);

```

通过上述代码，我们把一个父级元素.container设置为flex布局，采用了wrap匀速，来实现内容的自动换行；并且在每个子元素上添加使用块级格式化上下文元素(BFC)来实现隔行背景色的间隔。

同时我们使用了nth-child选择器来选中奇数行和偶数行，利用transform属性的translateX方法，分别将其横向移动20%和-20%，来实现文字左右交错的效果。

运行结果如下图所示：

![text-align交错排列示例二]()

通过上述两种方法，我们可以实现比较独特的文字排版效果，使得内容更加有趣、引人入胜。在实际开发中，我们还可以根据实际需要结合其他CSS属性来扩展这些效果：比如背景色的使用、文字阴影的添加等等。