display: flex可以通过flex-direction属性来改变主轴的方向。默认情况下，flex-direction属性设置为row，这意味着主轴是从左到右的水平轴。但是，您可以通过将flex-direction属性设置为以下值之一来改变主轴的方向：
column: 这会使主轴变成从上到下的垂直轴。
row-reverse: 这会使主轴变成从右到左的水平轴。
column-reverse: 这会使主轴变成从下到上的垂直轴。
例如，如果您想要将主轴设置为垂直轴，则可以使用以下CSS代码：
.container {
display: flex;
flex-direction: column;
}
这将使.container元素内的项目从上到下排列，而不是从左到右排列。
除了flex-direction属性，还有其他一些属性可以用来改变交叉轴和主轴之间的对齐方式。以下是一些常见的属性：
justify-content: 用于定义项目在主轴上的对齐方式。可以设置为flex-start、flex-end、center、space-between或space-around。默认值为flex-start。
align-items: 用于定义项目在交叉轴上的对齐方式。可以设置为flex-start、flex-end、center、baseline或stretch。默认值为stretch。
align-content: 用于定义多行项目在交叉轴上的对齐方式。可以设置为flex-start、flex-end、center、space-between、space-around或stretch。当项目只有一行时，该属性不起作用。默认值为stretch。
这些属性可以单独使用，也可以结合使用，以实现所需的对齐方式。例如，如果您想要在交叉轴上垂直居中对齐项目，可以使用以下CSS代码：
.container {
display: flex;
align-items: center;
}
这将使.container元素内的项目在交叉轴上居中对齐。