flex-direction: column;作用

flex-direction: column;是一个CSS属性，它用于设置flex容器中主轴的方向为垂直方向，即从上到下排列子元素。这意味着子元素将沿着容器的垂直方向排列，而不是默认的水平方向。这个属性可以与其他flex属性一起使用，例如justify-content和align-items，以控制子元素在容器中的位置和对齐方式。

举个例子，如果我们有一个包含三个子元素的flex容器，并将flex-direction设置为column，那么这三个子元素将按照从上到下的顺序排列，而不是默认的从左到右的顺序。

<<引用>>
div{
display: flex;
width: 80%;
height: 300px;
background-color: pink;
flex-direction: column; /* 设置主轴方向为垂直方向 */
}
div span{
width: 150px;
height: 100px;
background-color: skyblue;
}