本文继续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-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

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