要更改display:flex元素的主轴方向，可以使用flex-direction属性。默认情况下，主轴方向为水平方向，但可以使用以下值之一更改其方向：
row：主轴方向为水平方向（默认值）。
row-reverse：主轴方向为水平方向，但是从右到左布局。
column：主轴方向为垂直方向。
column-reverse：主轴方向为垂直方向，但是从下到上布局。
例如，要将display:flex元素的主轴方向更改为垂直方向，可以这样写：
.container{
display:flex;
flex-direction:column;
}
这将使.container元素的子元素在垂直方向上排列。
除了flex-direction属性之外，还有其他一些属性可以用于更改display:flex元素的主轴方向，包括：
justify-content：用于设置子元素在主轴方向上的对齐方式。可以使用以下值：flex-start（默认值，左对齐），flex-end（右对齐），center（居中对齐），space-between（两端对齐，项目之间的间隔相等），space-around（每个项目周围的间隔相等，项目之间的间隔是它们之间的两倍），space-evenly（每个项目周围的间隔相等）。
align-items：用于设置子元素在侧轴方向上的对齐方式。可以使用以下值：stretch（默认值，拉伸填充），flex-start（顶部对齐），flex-end（底部对齐），center（居中对齐），baseline（基线对齐）。
align-content：用于设置多行子元素在侧轴方向上的对齐方式。可以使用与justify-content相同的值。
这些属性可帮助您完全控制display:flex元素的布局。例如，以下代码将使子元素在垂直方向上居中对齐，而在水平方向上从左到右排列，且相邻元素间距相等：
.container{
display:flex;
flex-direction:row;
justify-content:flex-start;
align-items:center;
gap:20px;
}