平常使用flex弹性布局的时候，总是用默认方向的排列布局，也就是横向排：子元素居中、左、或者右。

昨天遇到一个竖着排的设计稿，刚开始想到的是BFC浮动布局，宽度固定，子元素都浮动；或者IFC行内布局也需要将子元素和父元素宽度固定一致，一个个的向下排列，而且还需要清除元素之间的空隙。

最终效果在线体验：https://course.51qux.com/column

虽然上面两种办法都能实现，却不是最简单有效的。今天睡醒之后，突然想到了FFC-弹性格式化上下文有方向排列，哦！那不是，横变竖，样式就可以了？

.box{
display:flex;
justify-content: center;
align-items: center;
}
.box1{
display:flex;
justify-content: center;
align-items: center;
flex-direction: column;
}

果真，发现真的可以！效果图如下:
css弹性布局中flex-direction排列方向的妙用！-QUI-Notes
最后查阅flex-direction的相关资料，重新复习了一下这个属性的用法：
flex-direction可用参数：

flex-direction: row|row-reverse|column|column-reverse|initial|inherit;

css弹性布局中flex-direction排列方向的妙用！-QUI-Notes

最后告诫自己和前端伙伴们，知识不用就会忘，年纪越大忘的越快，还是要经常复习啊！之前总以为flex很简单，没有想到记住只有常用的几个属性，不常用的都扔了！