微信小程序 Flex局部元素被挤压问题
2024-09-04 03:35:07
关于Flex布局不在此处赘述,需要了解的可以查阅官方文档:基本的布局方法——Flex布局
当使用Flex布局,想实现如下图1的效果时,代码编写如下:
图1:
<!-- wxml文件 -->
<view class='test-view'>
<view class='title'>标题:</view>
<view class='content'>内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容</view>
</view>
/* wxss文件 */ .test-view {
margin-top: 20rpx;
display: flex;
flex-direction: row;
background-color: white;
width: 100%;
} .title {
margin-left: 20rpx;
margin-right: 20rpx;
} .content {
word-wrap: break-word;
word-break: break-all;
}
但是运行结果却得到图2的效果,当后面的文字过多时,前面的view被挤压了
图2:
解决办法:
给标题的view的样式中添加一句:flex-shrink: 0; 即可得到图一的效果,意思是flex的收缩为0,不压缩的意思
.title {
margin-left: 20rpx;
margin-right: 20rpx;
flex-shrink:;
}
最新文章
- mysql5.6-5.7性能调优
- linux日常小坑
- SVG 2D入门12 - SVG DOM
- MySQL备份学习
- linux环境下配置虚拟主机域名
- 动态加载JS(css)文件
- New Features in C# 3.0, 4.0 and 5.0 (英文差的免入)
- OS快速开发必备
- SpannableString富文本
- jQuery DataTable 删除数据后重新加载
- Pycharm+django新建Python Web项目
- Web API 持续集成:PostMan+Newman+Jenkins(图文讲解)
- weblogic反序列化漏洞CVE-2018-2628-批量检测脚本
- Full permutation
- 二叉树的递归,非递归遍历(java)
- sureface 屏幕残影问题官方解决方案 - 卸载显卡驱动
- ruby做接口测试
- 60、常规控件(3)Snackbar-可操作的提示框,Toast升级版
- Spring Boot2.0之全局捕获异常
- orcad元件属性批量修改(通过excel表格)