在CSS中，排列元素可以使用多種方式進行，其中一種方式是通過x軸方向進行排列。在這種方式下，元素水平地在容器內部排列，而不是垂直地排列。下面將介紹一些在x軸方向排列元素的常用CSS樣式。

/* display: flex */
.container {
display: flex;
flex-direction: row;
justify-content: space-between;
}
/* float */
.element {
float: left;
}
/* inline-block */
.element {
display: inline-block;
}
/* table-cell */
.container {
display: table;
}
.element {
display: table-cell;
}
/* grid */
.container {
display: grid;
grid-template-columns: repeat(3, 1fr);
}

這些CSS樣式中，display:flex 和 float 是使用最多的排列元素的樣式。在flex的情況下，通過設置 flex-direction: row 和 justify-content: space-between，可以讓元素在容器內部水平排列，并且在元素之間空出空白間距。使用 float 樣式可以讓元素像浮動一樣隨著文本流水平排列。

使用 display:inline-block 樣式也可以讓元素進行水平排列。但是，如果元素的寬度不同，就會出現水平位置不對齊的情況。因此，這種樣式適合用于寬度相同的元素進行排列。同時，使用 display:table 和 display:table-cell 樣式也可以達到類似的效果。

最后，通過 display:grid 樣式，可以更靈活地排列元素。在 grid-template-columns 上設置元素的寬度，即可讓元素水平排列。