平常使用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-Note
最后查阅flex-direction的相关资料,重新复习了一下这个属性的用法:
flex-direction可用参数:

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

css弹性布局中flex-direction排列方向的妙用!-Qui-Note

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