<template>
<view class="main-box">
<view class="head-box">
<text >111</text>
</view>
<view class="option-box">
<text class="option">恭喜发财呀</text>
<text class="option">恭喜发财呀</text>
<text class="option">恭喜发财呀</text>
<text class="option">恭喜发财呀</text>
<text class="option">恭喜发财呀</text>
</view>
</view>
</template>
<script>
export default {
data() {
return {
}
},
methods: {
}
}
</script>
<style>
.main-box{
display: flex;
flex-direction: row;
background-color: #007AFF;
}
.head-box{
display: flex;
flex-direction: column;
background-color: #E43D33;
width: 80px;
}
.option-box{
display: flex;
flex-direction: row;
flex-wrap: wrap;
flex: 1;
}
.option{
margin: 0px 5px 5px 0px;
border: 1px solid rgba(200, 200, 200, 1);
color:rgba(107, 107, 107, 1);
border-radius: 15px;
padding: 3px 16px 3px 16px;
}
</style>
- 发布:2022-01-19 02:02
- 更新:2024-11-01 15:54
- 阅读:1253
产品分类: uniapp/App
PC开发环境操作系统: Windows
PC开发环境操作系统版本号: 设备名称 DESKTOP-O8KRVCG 处理器 11th Gen Intel(R) Core(TM) i5-1135G7 @ 2.40GHz 2.42 GHz 机带 RAM 16.0 GB (15.8 GB 可用) 设备 ID 203ED2D7-5A18-4349-92D5-A7818D0157BB 产品 ID 00342-36327-00835-AAOEM 系统类型 64 位操作系统, 基于 x64 的处理器 笔和触控 没有可用于此显示器的笔或触控输入
HBuilderX类型: 正式
HBuilderX版本号: 3.3.5
手机系统: Android
手机系统版本号: Android 11
手机厂商: 小米
手机机型: Redmi Note 9 Pro
页面类型: nvue
vue版本: vue2
打包方式: 云端
项目创建方式: HBuilderX
示例代码:
操作步骤:
把以上代码分别存成vue页面和nvue页面。显示结果不一致,nvue页面内容不全。
把以上代码分别存成vue页面和nvue页面。显示结果不一致,nvue页面内容不全。
预期结果:
希望nvue页面显示和vue一样。
希望nvue页面显示和vue一样。
实际结果:
vue页面符合预期。nvue页面内容撑不开父容器,造成显示不全。
vue页面符合预期。nvue页面内容撑不开父容器,造成显示不全。
bug描述:
flex格式相同排版,vue模式下显示正常,nvue模式下,内容撑不起父容器。