场景一
适合商品类展示型布局，后台的数据呈现列表数据返回，窗口宽度变化，图片比例不变.假设我们的图片宽高固定比例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>
