element ui table 在flex布局中宽度不能自适应
UI 不能 布局 Table Element 适应 宽度 flex
2023-09-11 14:15:07 时间
问题描述:
在vue-element-admin项目中需要实现多个列表并排排列,于是想到使用flex布局,页面渲染之后发现,当拉伸显示区域,table宽度能自动拉伸,但是当压缩显示区域发现,table的宽度不能自适应。
解决方法
.item-body {
display: flex;
height: 100%; // 此高度必须,否则table-father的高度为0,border无效
.table-father {
flex: 1;
border-right: 1px solid #eee;
position: relative; // table的直接父元素加position属性
.el-table { // table 加position属性
position: absolute;
}
}
}
备注
-
关于flex布局
a. flex下的子控件在主轴方向上的尺寸是无效的
b. 子元素在主轴方向上的尺寸可以被子子元素撑开
c. 非主轴方向上的尺寸不会被子子元素撑开
d. flex下子元素为了自适应显示区域,把width和height设置100%时,需在该子元素的外层包一层position属性的父元素
e. 元素使用position后衍生脱离了文件流,导致其父元素高度变成0,此时要给高度失效的元素加上height:100%。此时还要注意样式的继承问题。
相关文章
- iOS之UI--转场动画
- UI Startup analysis - sap.ui.core.Core what js files are loaded
- 我们在tool里给ui element设置断点,然后操作的时候,断点就触发了。Framework是咋实现的
- CRM客户主数据UI上有哪些字段可以触发partner determination
- change all day checkbox in Fiori ui
- element ui 表单验证规则demo:不能中英文混杂!不能有标点符号!
- jQuery UI 使用
- 超全的Android组件及UI框架
- class Ui MainWindow has no member named actionnew ui actionnew ssetIcon的错误解决方案
- Android UI法宝的设计资源的开发
- UI自动化测试入门 - (1) Selenium 的使用
- 基于JAVA实现的WEB端UI自动化 - WebDriver高级篇 - cookie操作