场景一
适合商品类展示型布局，后台的数据呈现列表数据返回，窗口宽度变化，图片比例不变.假设我们的图片宽高固定比例16：9。
效果图满屏：
效果图缩放时：
移动端：
直接看代码。里面会注释详细说明
<body> <!-- 多嵌套一层div.因为margin外边距设置为百分比%的话，它的基准是上一层dom的宽度 --> <div class="parentBox"> <div class="parent"> <div class="container"> <img src="https://img0.baidu.com/it/u=399951341,1287964223&fm=253&fmt=auto&app=138&f=JPEG?w=994&h=500" alt=""> </div> <div> <div ><span class="textOver">我是块级别3我是块级别3</span></div> <div><span class="textOver">我是块级别3我是块级别3</span></div> <div><span class="textOver">我是块级别3我是块级别3</span></div> </div> </div> </div> </body> <style> .parentBox{ display: flex; flex-wrap: wrap; } .parent { width: 30%;/*这里想一行排三个。设置成了30%*/ border-radius: 5px; margin-bottom: calc(10% / 2);/*间隙和水平保持一致*/ background-color: #ffffff; } .parent:not(:nth-child(3n)) { margin-right: calc(10% / 2);/*剩下10%。为两个间隙平分*/ } .container { width: 100%; padding-top: 56.25%; /*这里的百分比是上层（parent ）的宽度为标准,这也是多嵌套一层原因*/ /* 前提是图片宽高比例是16：9,所以这里是9/16。如果不理解，就记着反过来算 */ position: relative; } /*图片这里就要定位+padding-top或者padding-bottom*/ .container img { width: 100%; height: 100%; position: absolute; top: 0; left: 0; } .textOver{ /* 文字溢出省略 */ display: -webkit-box!important; -webkit-box-orient: vertical!important; -webkit-line-clamp: 1!important; overflow: hidden!important; } </style>
补充：css属性aspect-ratio: 16/9;(响应式网页设计中，保持一致的纵横比) 可以直接达到这种效果；不过兼容性不太好；如果项目没有兼容性要求；可以用
场景二：一行固定显示的。适用场景：比如移动端个人中心功能模块排列时。基于flex:1实现。始终占满布局
效果图
<body> <!-- 一行固定元素个数 --> <div class="blockBox"> <div class="blockItem"> <img class="blockImg" src="https://img0.baidu.com/it/u=1089844382,2208108806&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500" alt=""> <div class="textCenter">标题1</div> </div> <div class="blockItem"> <img class="blockImg" src="https://img0.baidu.com/it/u=1089844382,2208108806&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500" alt=""> <div class="textCenter">标题2</div> </div> <div class="blockItem"> <img class="blockImg" src="https://img0.baidu.com/it/u=1089844382,2208108806&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500" alt=""> <div class="textCenter">标题3</div> </div> </div> </body> <style> .blockBox{ display: flex; } .blockItem{ flex: 1; } .blockImg{ display: block; margin: 0 auto; } .textCenter{ text-align: center; } </style>
场景三：h5自适应布局，非弹性布局，根据窗口宽度自适应变化
先看布局
<view v-if="proList.length>0" class="main_row2_list"> <!-- 商品item --> <view @click="goProDetail" :data-proId='item.id' class="pro_item" v-for="(item,i) in proList" :key="i"> <view> <image class="pro_img" :src="item.mainImg" mode="aspectFill"></image> </view> <view class="pro_name dark-grey fs-base text_clamp1">{{item.name}}</view> <view class="pro_spec mid-grey fs-base">规格：{{item.specifications}}</view> <view class="main-color"> <label class="pro_price_unit fs-sm">￥</label> <label class="pro_price fs-lg">{{item.retailPrice}}</label> </view> </view> <!-- 商品item end--> </view> <style scoped lang="scss"> .main_row2_list { min-height: 0; margin: 0 12px; .pro_item { //商品宽度变量 ； 24px 父级的左右marin之和 /2 一行摆俩 6px单个元素的间隔 16px单个元素的左右padding之和 $pro_item_with: calc(((100vw - 24px) / 2) - 6px - 16px); // 变为行内块元素，也是不使用弹性布局的关键 display: inline-block; width: $pro_item_with; margin-bottom: 12px; min-height: 0px; padding: 8px; border-radius: 8px; background-color: #FFFFFF; // 图片 .pro_img { width: $pro_item_with; height: $pro_item_with; border-radius: 8px; overflow: hidden; } // 名称 .pro_name { line-height: 40rpx; margin: 4px 0; } //规格 .pro_spec { line-height: 48rpx; } // 价格单位 .pro_price_unit { line-height: 40rpx; } //价格 .pro_price { line-height: 40rpx; } } //odd第奇数个元素加右边距 .pro_item:nth-child(odd) { margin-right: 6px; } //even 第偶数数个元素加左边距 .pro_item:nth-child(even) { margin-left: 6px; } } </style>
