改变flex子元素主轴方向的属性是flex容器的flex-direction属性。该属性控制了flex子元素在主轴上的排列方向。
flex-direction属性可以设置为以下四个值之一：
row：子元素按照文本方向从左到右排列（默认值）。
row-reverse：子元素按照文本方向从右到左排列。
column：子元素按照文本方向从上到下排列。
column-reverse：子元素按照文本方向从下到上排列。
例如，如果要将flex容器的子元素从左到右排列，可以将flex-direction属性设置为row，如下所示：
.container{
display:flex;
flex-direction:row;
}
如果要将flex容器的子元素从上到下排列，可以将flex-direction属性设置为column，如下所示：
.container{
display:flex;
flex-direction:column;
}
当然，flex-direction属性的取值不仅仅局限于上述四个选项，还有其他一些可选值，这里简单介绍一下：
rowwrap和row-reversewrap：类似于row和row-reverse，但是当子元素宽度超出容器宽度时，会自动换行。
columnwrap和column-reversewrap：类似于column和column-reverse，但是当子元素高度超出容器高度时，会自动换行。
inherit：继承父元素的flex-direction值。
initial：将flex-direction属性重置为默认值row。
unset：取消所有flex-direction属性的设置，即使它们在继承链中设置为不同的值。
下面是一个使用flex-direction属性的示例，将子元素从上到下排列，并在子元素宽度超过容器宽度时自动换行：
.container{
display:flex;
flex-direction:columnwrap;
}
需要注意的是，flex-direction属性只影响主轴方向，而与之垂直的交叉轴方向是由justify-content和align-items属性控制的。