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

苏南大叔:网页css布局,flex弹性盒子,容器如何设置方向及折行? - css-flex-box
网页css布局,flex弹性盒子,容器如何设置方向及折行?(图5-1)

本文测试环境:mac,chrome@75.0.3770.100

基础代码

测试范例如下:

<div class="box">
  <div class="item">1</div>
  <div class="item">2</div>
  <!-- ... -->
  <div class="item">n</div>
</div>
<style>
.box{
  display:flex;
}
</style>

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-directionflex-wrap的属性合集。例如:

flex-flow:row wrap;

就相当于:

flex-direction:row;
flex-wrap:wrap;

组合效果图

flex-wrap: nowrap;
flex-direction:row;

苏南大叔:网页css布局,flex弹性盒子,容器如何设置方向及折行? - nowrap-row
网页css布局,flex弹性盒子,容器如何设置方向及折行?(图5-2)

flex-wrap: wrap;
flex-direction:row;

苏南大叔:网页css布局,flex弹性盒子,容器如何设置方向及折行? - wrap-row
网页css布局,flex弹性盒子,容器如何设置方向及折行?(图5-3)

flex-wrap: wrap-reverse;
flex-direction:row;

苏南大叔:网页css布局,flex弹性盒子,容器如何设置方向及折行? - wrap-reverse-row
网页css布局,flex弹性盒子,容器如何设置方向及折行?(图5-4)

flex-wrap: wrap-reverse;
flex-direction:column;

苏南大叔:网页css布局,flex弹性盒子,容器如何设置方向及折行? - wrap-reverse-column
网页css布局,flex弹性盒子,容器如何设置方向及折行?(图5-5)

总结

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

如果本文对您有帮助,或者节约了您的时间,欢迎打赏瓶饮料,建立下友谊关系。
本博客不欢迎:各种镜像采集行为。请尊重原创文章内容,转载请保留链接作者。
本站采用创作共用版权协议, 要求署名、非商业用途和相同方式共享。
转载本站内容必须也遵循“署名-非商业用途-相同方式共享”的创作共用协议。
未经许可,规模化镜像抄袭本站内容的行为,将会根据有关法律法规进行维权。
程序如此灵动~》下所有原创文章,如被用于商业用途,请您按规定支付稿费。

 【加群】加入QQ群【175454274】和大家一起讨论这个问题

 【源码】本文代码片段及相关软件,请点此获取

 【绝密】秘籍文章入口,仅传授于有缘之人   css    flex

本站的忠实读者小伙伴,正在阅读下面这些文章: