flex布局常用布局方式（一行显示固定个数，自动换行显示）

一行显示固定个数，自动换行显示

基于uni-app实现一行显示固定个数的元素，元素可以遍历生成的，并且自动换行显示，效果如下图所示

代码实现：

<template><view class="container"><view class="list"><view class="item"></view><view class="item"></view><view class="item"></view><view class="item"></view><view class="item"></view><view class="item"></view><view class="item"></view></view></view>
</template><script>export default {data() {return {}},methods: {}}
</script><style scoped lang="scss">.list{padding: 30rpx;background-color: #baf;// 设置父元素成为弹性盒display: flex;// 让弹性盒元素在必要的时候拆行flex-wrap: wrap;.item{background-color: deeppink;height: 100rpx;// 每个元素都要设置右边距margin-right（每个元素的左右间隙）// 同时设置下边距margin-bottom（每个元素的上下间隙）margin: 0 20rpx 20rpx 0;width: calc((100% - 60rpx) / 4);   // 这里一行显示4个，所以是/4，一行显示几个就除以几 // 这里的60rpx = (分布个数4-1)*间隙20rpx, 可以根据实际的分布个数和间隙区调整min-width: calc((100% - 60rpx) / 4);max-width: calc((100% - 60rpx) / 4);// 每行最右侧的那个不设置右外边距&:nth-child(4n + 4) {margin-right: 0;} }}
</style>

列表左侧图标禁止压缩

列表右侧信息内容较多时，开启flex布局，就会导致左侧图片压缩

使用样式，禁止图片压缩：

flex-shrink:0;

代码实现：

<template><view class="container"><view class="list"><view class="item"><image class="icon" src="../../static/logo.png" mode=""></image><view class="info"><view class="title">列表标题</view><view class="content">列表内容列表内容列表内容列表内容列表内容列表内容列表内容</view></view></view><view class="item"><image class="icon" src="../../static/logo.png" mode=""></image><view class="info"><view class="title">列表标题</view><view class="content">列表内容列表内容列表内容列表内容列表内容列表内容列表内容</view></view></view></view></view>
</template><script>export default {data() {return {}},methods: {}}
</script><style scoped lang="scss">.list{padding: 20rpx;background-color: greenyellow;.item{display: flex;background-color: aquamarine;margin-bottom: 20rpx;.icon{width: 100rpx;height: 100rpx;margin: 20rpx;flex-shrink:0;//禁止压缩}.info{display: flex;flex-direction: column;justify-content: space-around;}}}
</style>

flex布局常用布局方式（一行显示固定个数，自动换行显示）相关推荐

【CSS】flex的常用布局
1.垂直居中,写在父级上 div{display: flex;justify-content: center;align-items: center; } 2.flex-左右两端,垂直居中该布局在移 ...
ios charts显示固定个数_上次挂在了百度iOS二面不服气，三月之期已到，这次终于拿下offer！...
笔试.面试题 1.算法题 (1).请在1000万个整型数据中以最快的速度找出其中最大的1000个数? 这是一个经常被问到的问题,百度网上解法也很多. 这里仅提供基本思路,供参考:把1000万的整型平均 ...
php显示固定页码,php显示页码分页类的封装
搜索热词本文实例为大家分享了PHP封装显示页码的分页类,供大家参考,具体内容如下一.代码 conn.PHP PHP;"> connect(); } public function ...
16、控件使用之图标动画显示和图片动画显示
控件使用之图标动画显示和图片动画显示 1.用到的控件 2.添加控件 2.1.添加[动画图标显示]控件 2.2.添加[增量调节]控件 2.3.添加[动画图片显示]控件 3.保存工程及生成文件 4.下载文 ...
flex 左右布局_web前端学习：移动端开发常用布局—前端弹性布局总结
各位已经入坑的前端小伙伴,前面咱们已经给大家分享了移动端开发时候流式布局的应用场景及注意事项,今天再次给大家分享一个布局叫弹性布局,接下来咱们从如下几个方面,全方位的给大家介绍弹性布局的使用. 一:什 ...
flex 左右布局_移动端开发常用布局：前端弹性布局总结
各位已经入坑的前端小伙伴,前面咱们已经给大家分享了移动端开发时候流式布局的应用场景及注意事项,今天再次给大家分享一个布局叫弹性布局,接下来咱们从如下几个方面,全方位的给大家介绍弹性布局的使用. 一:什 ...
flex弹性布局常用属性
1,flex是一维布局,开启flex布局后,里面所有的元素将被称作item(项目) 1,当给父盒子设为弹性布局后,子元素float,clear和vercital-align属性将失效 3,主要通过给父 ...
1._请写出5种以上的android中界面常用布局方式,跳槽季“充电宝”Android面试题(一)...
1.请介绍下Android中常用的5种布局 Android中常用的5种布局分别为:FrameLaout(框架布局).LinearLayout(线性布局).AbsoluteLayout(绝对布局).Re ...
Flex布局常用属性简介
flex弹性布局 flex布局与传统布局的区别传统布局: 传统布局,基于盒模型,依赖 display属性 .position属性 .float属性,它对于那些特殊布局非常不方便,比如垂直居中. 兼容 ...

flex布局常用布局方式（一行显示固定个数，自动换行显示）

一行显示固定个数，自动换行显示

列表左侧图标禁止压缩

flex布局常用布局方式（一行显示固定个数，自动换行显示）相关推荐

最新文章

热门文章