html如何使盒子改变方向,网页css布局，flex弹性盒子，容器如何设置方向及折行？...

本博客不欢迎：各种镜像采集行为，请尊重知识产权法律法规。大家都是程序员，不要闹得不开心。

本文继续flex的话题，flex弹性盒子模式是非常先进的，可以做到的事情很多。但是事实上，在普通的网页里面也用不到几个属性。但是，出于上升文章高度的目的，苏南大叔继续案例flex的相关属性。

网页css布局，flex弹性盒子，容器如何设置方向及折行？(图5-1)

本文测试环境：mac,chrome@75.0.3770.100。

基础代码

测试范例如下：

1

2

n

.box{

display:flex;

}

flex-direction

这个属性最常用，决定了主轴的横竖及走向，也就是说决定了box内部的item的摆放顺序。非常的好理解。默认值是row。取值说明row横向从左到右默认

row-reverse横向从右到左

column纵向从上到下

column-reverse纵向从下到上

可以参考文章：

flex-wrap

这个是说，对于item排列成一行，超出box的范围之后，该如何处理？默认值是nowrap。不过苏南大叔认为：更值得推荐的取值应该是wrap。取值说明nowrap不拆行或不拆列默认

wrap拆行或拆列推荐

wrap-reverse拆行或拆列，以相反的顺序

这里的flex-wrap，如果设置为nowrap，就会触发item变形等不可控事件(待后续另开文章讨论)，所以，苏南大叔认为还是wrap换行，比较好些。而wrap-reverse这个的效果如下，效果是有些奇葩的。折行，但是是折行的方向和wrap相比是相反的。

flex-flow

这个比较好理解，flex-flow就是flex-direction和flex-wrap的属性合集。例如：flex-flow:row wrap;

就相当于：flex-direction:row;

flex-wrap:wrap;

组合效果图flex-wrap: nowrap;

flex-direction:row;

网页css布局，flex弹性盒子，容器如何设置方向及折行？(图5-2)flex-wrap: wrap;

flex-direction:row;

网页css布局，flex弹性盒子，容器如何设置方向及折行？(图5-3)flex-wrap: wrap-reverse;

flex-direction:row;

网页css布局，flex弹性盒子，容器如何设置方向及折行？(图5-4)flex-wrap: wrap-reverse;

flex-direction:column;

网页css布局，flex弹性盒子，容器如何设置方向及折行？(图5-5)

总结

本文描述的是flex弹性盒子的box的一部分css属性，其中需要注意的是flex-wrap，如果设置了nowrap，那么容器里面的项目很有可能会是变形的。这个是千万要注意的地方。

如果本文对您有帮助，或者节约了您的时间，欢迎打赏瓶饮料，建立下友谊关系。

本博客不欢迎：各种镜像采集行为。请尊重原创文章内容，转载请保留作者链接。