vue：flex布局产生宽度丢失

最新推荐文章于 2023-09-16 17:43:35 发布
最新推荐文章于 2023-09-16 17:43:35 发布
阅读量1k 收藏
点赞数
分类专栏： vue 文章标签： 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_44429079/article/details/121472223
版权

flex布局产生宽度丢失

今天在写一个页面的时候发现使用flex布局产生了宽度丢失，审查元素查看主体宽度后发现，flex下套二级元素后，宽度会没掉，这时候要么直接指定目标容器宽度，要么一层一层往上找。在这里插入图片描述

最外部的flex根元素他因为本身是一个div，所以宽度是符合块元素设定的，width=100%，然后这个根元素的子元素宽度已经不会填满了，只会被内容撑开，所以子元素的子元素没有宽度，子元素的子元素的子元素也没有

77快乐
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
vue-layout-diy:基于vue和flex的自定义布局
05-16
基于vue和flex的自定义布局，。 S前缀为Sunflower简写，我们团队的命名空间。 项目步骤 使用vue-cli@2.9.3初始化项目； vue init webpack vue-layout-diy 根据个人/团队代码规范，配置eslint； 安装； 完成基于flex...
Vue布局：Vue布局组件
02-18
提示布局Vue布局组件一组用于构建响应式布局的简单组件npm我@ berhalak / vue-layout 从“ @ berhalak / vue-layout”中导入布局Vue.use（Layout）; // 或者Vue.use（布局，“ v-”）; // 字首组件：hor，ver，cols...
关于flex布局中子元素宽度失效的问题
weixin_44703304的博客
04-04 1万+
在弹性布局中，用上flex后发现会上瘾，因为这个属性实在太好用了。有一种情况是左边我设置一个子元素固定宽度，右边设置自适应占满剩余空间，但有时候会发现左边固定元素的宽度竟然失效了，被右边的元素挤占空间了，所以仔细查看flex属性的特点后，发现少设置了一些属性样式。 父元素设置完 display:flex 属性后； 子元素设置固定宽度： width:50px; height:50; 这里加上另外一...
flex布局设置的高度或者宽度丢失
qq_45560350的博客
09-22 1270
当元素的高度和(宽度和)大于容器的高度(宽度)时,元素的高度(宽度)会被压缩,如果不想被压缩,元素添加属性 flex-shrink: 0;
flex布局下你可能忽视的宽度、高度问题
hmmmmm的博客
08-29 833
flex布局下你可能忽视的宽度、高度问题
【CSS】flex布局中子元素设置宽度失效
流萤梦的博客
02-18 9148
先来盘一盘我自己遇到的问题场景，大概如图所示： 前提条件：box使用了flex布局，让div1和div2两端对齐，box未设置宽度，其宽度是自适应的，div2的宽度是固定的，div1的宽度理想状态是box的宽度减去div2的固定宽度。 简单来说就是，div2固定宽度，div1宽度自适应占满剩余空间。 问题现状：div1长度没超长的时候，没有问题。但当div1的内容长度超长了，div2设置的宽度失效，会被压缩。 而问题的原因主要在于flex的flex-grow和flex-shrink属性。 先.
flex 布局引起的元素宽度失效问题
RealizeInnerSelf丶
06-23 4010
文章目录flex 布局引起的元素宽度失效问题bug 效果预期效果原因解决方案如果你觉得写的不错或者帮到你了，记得给我点个赞哟~ flex 布局引起的元素宽度失效问题 有些 bug，一不注意可能排查半天都排查不出来，而它恰恰又是你自己造成的… 如下 bug 效果图，卡片样式写的好好的，图片下面的详细信息字段样式代码都是同一个（最后一行土地坐落设置的宽度是 100%，其他几个字段都是 50%），突然最后一行土地坐落抽筋了 bug 效果 预期效果 原因 愣了一下，调了几个 CSS 属性发现还是这样…到底是
flex布局实现上下固定中间滑动的布局方式
11-20
2.设置最外层div的布局方式为弹性布局display:flex; 3.设置最外层div的主轴方向为flex-direction: column;主轴为垂直方向，起点在上沿 row（默认值）：主轴为水平方向，起点在左端。 row-reverse：主轴为水平方向，...
aurora-vue:基于vue的管理平台
04-12
网络客户端项目设置npm install编译和热重装以进行开发npm run serve编译并最小化生产npm run build运行测试npm run test整理和修复文件npm run lint
关于flex中width宽度失效
8月13日
07-03 1979
关于使用flex中width宽度失效 可以使用display：flex 在子元素中使用 flex-shrink: 0; 可以保持，实测有用
vue项目中 不能在组件的 上面使用 flex布局 否则 flex布局失效
呵呵的牛
06-11 3115
不能再el-card上面作为父元素使用flex
vue微信公众号开发flex踩坑
晨的一朵云的博客
10-11 265
"display:flex"对于布局页面来说是一把利器，但是当它被应用于移动端布局时，常常会冒出一些幺蛾子。 微信端录入和显示客户信息常常会出现以下布局，这种布局用纵向flex嵌套横向flex，再用flex:1使得元素自动撑满剩余空间，是一件轻而易举的事情。 还有这种头部提示信息和正文部分的布局等，都可以用flex简单的完成。 但是在ios手机上，我就遇到过这两种问题： 1、当 flex:1 遇上 inpu...
flex 布局中子元素设置宽度无效的解决办法
热门推荐
UserGuan的博客
01-05 1万+
因为父元素设置了【display: flex】所以该父元素下所有的子元素都会默认加上【flex: 0 1 auto】。其中 1 就是 flex 中的 flex-shrink 属性，表示开启元素的收缩功能，所以子元素宽度才会失效。flex 属性用于设置或检索弹性盒模型对象的子元素如何分配空间。flex 属性是 flex-grow、flex-shrink 和 flex-basis 属性的简写属性。注意：如果元素不是弹性盒模型对象的子元素，则 flex 属性不起作用。默认值：0 1 auto。
el-table在flex布局下宽度不能自适应的解决方法
qq_34631220的博客
01-11 1111
el-table在flex布局下宽度不能自适应的解决方法
问题解决：百分比宽度页面缩放会变形
海风依旧
10-25 1846
问题解决：用百分比设置了宽度，但是页面缩放会变形
选项卡_flex布局&&改变border-bottom 的长度解决方法
daddykei的博客
07-09 1581
这里写目录标题一级目录核心部分html部分css部分js部分 一级目录 核心部分 1.flex布局 http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html 2.改变border-bottom 的长度解决方法 .mt-tabpage-title .mt-tabpage-item-cur { position: relative; } .mt-tabpage-title .mt-tabpage-item-cur:after { color: #666
父元素flex:1,子元素宽度100%失效的问题
weixin_47813845的博客
12-02 3598
今天做项目时遇见一个问题，父元素在设置flex:1来固定宽度撑满时，子元素设置width100%无效。经过尝试发现给父元素及设置flex:1的元素加上width:0可解决。即这样写： .parent{ flex:1; width: 0; .children{ width: 100%; overflow-x:scroll ; } } 但同时遇到了另一个问题，我发现这样设置后，即使width超过之后，横向滚动条依然不出现，经过尝试加上一句代码即可： .parent{
flex:1的大坑
最新发布
weixin_48082900的博客
09-16 1081
设置flex:1不生效,高度还是会超出父元素,如何解决?
vue display:flex
08-04
在Vue中，可以使用CSS的`display:flex`属性来实现Flex布局。在Vue的模板中，可以通过设置元素的class来应用Flex布局。例如，可以在一个`<div>`元素上添加class为`box`，然后在对应的样式中设置`display:flex`来将该元素设置为Flex容器。[2] 以下是一个使用Vue实现Flex布局的示例代码： ```html <template> <div class="box"> <!-- 子元素 --> <div class="item"></div> </div> </template> <style scoped> .box { display: flex; /* 其他Flex属性 */ } .item { /* 子元素样式 */ } </style> ``` 在上述代码中，通过设置`.box`的`display:flex`属性，将其设置为Flex容器。然后可以在`.box`中添加子元素`.item`，并通过设置子元素的样式来控制其在Flex容器中的布局。[2] 另外，还可以使用`flex-direction`属性来指定Flex容器的主轴方向。默认情况下，主轴为水平方向，可以通过设置`flex-direction`为`row`、`row-reverse`、`column`或`column-reverse`来改变主轴方向。[1] 希望以上信息对您有帮助！

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值