flex布局如何实现每行固定数量+自适应布的局

　　介绍

这篇文章主要介绍flex布局如何实现每行固定数量+自适应布的局,文中介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们一定要看完!

具体如下:

效果展示

<强>解析

, & lt; div 类=皌emplate", v=?项目,templateIndex), 7“在拷贝　　,,,,,,,,,,,,,& lt; div @click=皍seTemplate ()“, v-touch:长=?e)=祝辞touchin (groupIndex templateIndex)“比; 　　,,,,,,,,,,,,,,,& lt; img 类=癶ttps://www.yisu.com/assets/home-page/templateIcon.png icon", src=" alt/> 　　

模板名称

//父盒子,设置为: 　　.templateItem { 　　,,宽度:100%; 　　, 　　,,text-align:中心; 　　,,显示:flex; 　　,,align-content: flex-start; 　　,,flex-flow: row 包装; 　　}//子盒子,设置为: 　　,.template { 　　flex才能:0,0,25%; 　　,,margin-bottom: 20 px; 　　}

<>强父盒子设置:

, emsp;, emsp;子盒子排列方式为flex-start,从起始点开始放置子盒子,通过flex-flow设置换行,如果不设置换行,那么子元素会缩小自声以达到放在一行的效果。

<强>子盒子设置:

, emsp;, emsp;通过flex: 0 0 25%,设置子盒子的占位,flex属性是flex-grow, flex-shrink, flex-basis的简写,默认值为0,1,汽车。指明子项目占的份数

, emsp;, emsp;拆开说明:flex: 0 0 25%等于flex-grow=0(默认不放大)+ flex-shrink=0(不缩小)+ flex-basis=25%(项目占据主轴的空间)

以上是“flex布局如何实现每行固定数量+自适应布局”这篇文章的所有内容,感谢各位的阅读!希望分享的内容对大家有帮助,更多相关知识,欢迎关注行业资讯频道!