box flex 1 ,不等分问题

最新推荐文章于 2025-06-30 17:47:07 发布
最新推荐文章于 2025-06-30 17:47:07 发布
阅读量3.7k 收藏 1
点赞数 1
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/ISaiSai/article/details/50323809
本文探讨了一个关于使用-webkit-box-flex容器布局时，内部元素不等分的问题，并通过设置内部元素width:100%找到了解决方法。文章深入分析了布局机制及可能的原因。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

遇到个问题，不知道原因，纪录如下：

外部一个 -webkit-box-flex 的容器

内部两个 -webkit-box-flex 为1 的元素，但是发现内部元素不等分，而是根据内部的内容长短定的宽度


设置 内部元素width:100% 后问题解决 ，原因不明

ISaiSai
关注
CSS flex布局 flex-grow不为1 items始终均匀分配剩余空间问题
weixin_50290666的博客
01-11 1816
给某一 flex item 的 flex-grow 设置更大的值，但是 flex items 仍然均分了 flex container 的剩余空间。考虑选择器的优先级！
flex:1不等分的问题
weixin_42349568的博客
06-08 2684
一，现象 我们常常使用flex布局，来实现等分。 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> </head> <style type="text/css"> .box{ width: 100vw; height: 100vh; background: green; display
有关 CSS3 box-flex: 1
IT前端小菜
12-09 726
css3 里有一个属性 box-flex，我们有时需要将一个div平均分为几个小的div，这是整个属性就有大用处，但是，在真正使用的时候，我们会发现，如果平均分配的这几个元素里的文字如果不同时，这几个元素的宽度就不相等了，文字多的比文字小的元素要宽。 解决方法也很简单，在 box-flex 的元素中加一个属性 width:0; 就可以了。参考资料：https://segmentfault.com/
CSS的flex布局的flex: 1；不生效
最新发布
XD1060198931的博客
06-30 816
解决：给其再设置min-height:0;（垂直方向）或 min-width: 0。设置 min-height: 0。是 flex-grow: 1。当 Flex 子元素设置。
box-flex: 1
Vivianluolita的专栏
02-22 790
设置.md-f1 { box-flex: 1; -webkit-box-flex: 1; }，感觉没用啊可是删掉的话，这个div会移动到最右边。 订单编号： 95 医保编号： 0102306305 姓名： 柴立睿
用户体验思考与flex三坑：元素不均分、溢出不省略和垂直不滚动
热门推荐
flying meng的菜鸟居
05-15 1万+
flex已经越来越成为前端不可避免的话题。曾经为了搞清flex的原理偶然画了一张图。但后来发现只是冰山一角。 通过我的实践，发现使用flex布局时稍不注意便会遇到三个问题：子元素不平分父元素空间、对文字设置了溢出省略却失效、flex下列表溢出但是滚动失效。常常会让人摸不着头脑。这里记录探究。 元素不均分 “均分列”，也就是子元素等宽应该是项目中最常见的效果。我常常在项目中见到这样的代码： flex: 1; 似乎有很多人认为在 Flex 布局中这样显式设置即可“一劳永逸”。 但事实是什么？事实是我们都知道
CSS3中display:box模式box-flex不均分的情况
大爱无疆的博客
07-26 2473
现象 今天用css3的display:box属性时，出现了一个怪现象，它内部的子元素有内容并且内容还挺多的时候，box-flex就会失效，看下边这个： 问题页面，看到了吧，虽然设置了box-flex:1，但是这三个子div并没有均分，而是根据其内容来分配。 解决 百谷之后，终于找到了个奇技淫巧，设置子div的宽度，象这样 解决后的页面 发现没有？多了width:1%，对的，眼神好使，这个
flex三等分
06-18
/*内边距，不影响子项等分*/}.item{/*方法1：使用flex:1;*/flex:1;/*或者方法2：使用flex:1133.33%;*//*flex:1133.33%;*/height:100px;/*设置一个高度*/margin:010px;/*设置外边距，注意这样会占用空间，可能导致总...
flex均等分
06-09
引用说明：-关于Flex布局实现均等分，参考了Flex布局的基本概念[^1]。-关于ECharts图表自适应，采用了常见的resize方法[^2]。§§相关问题§§1.如何让ECharts图表在多个标签页切换时自适应大小?2.如何实现ECharts...
CSS实现等分布局的4种方式
09-27
只需设置`display: flex`和`flex: 1`，所有子元素就会自动等分空间。这种方法不仅支持各种浏览器，还提供了更多的布局控制选项。 ```css .parent { display: flex; } .child { flex: 1; height: 100px; } ...
flex三等分，且每个子元素字体居中
06-18
三等分意味着三个子元素应该等宽，我们可以给每个子元素设置相同的flex值（例如flex:1）来实现。同时，为了让字体居中，我们可以在每个子元素中使用text-align:center（水平居中）和line-height（垂直居中）或者使用...
CSS3.0盒模型display:-webkit-box;的使用
我以我名，行我道！
03-14 1682
box-flex是css3新添加的盒子模型属性，它的出现可以解决我们通过N多结构、css实现的布局方式。经典 的一个布局应用就是布局的垂直等高、水平均分、按比例划分。 目前box-flex属性还没有得到firefox、Opera、chrome浏览器的完全支持，但可以使用它们的私有属性定义firefox(- moz)、opera(-0)、chrome/safari（-w
小程序css实现flex布局不均等分
qq_40632009的博客
06-01 2235
1.要实现等分的话，在每一项中flex的值设置相同就行了，如flex:1或flex:2都行 2.要是非均等分的话只要各自设置flex的值为不同就行了 .list-item1,.list-item3{ background-color:#82c2f7; height:100px; text-align:center; border:1pxsolid#bdd2f8; /*我们希望这三个list-item的view组件三等分*/ flex:1; /...
box-flex用法
Good_zwn的博客
08-24 494
注意：使用box-flex的元素，其父元素display属性值必须是box 目前，还没有浏览器实现display:box,但是个浏览器厂商实现了带前缀的box属性: dispaly:-mox-box; display:-webkit-box; html代码： &lt;div id="div1"&gt; &lt;div id="div2"&gt; div2 ...
CSS day12 移动端布局练习
qq_34620296的博客
09-13 938
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-U...
CSS3中的box-flex属性
weixin_33869377的博客
03-21 132
之前在网上碰到阿里前端的面试题，如下： 下图绿色区域的宽度为100%，其中有三个矩形，第一个矩形的宽度是200px，第二个和第三个矩形的宽度相等。请使用CSS3中的功能实现它们的布局。 已知HTML结构是： <div> <div>column 1</div> <div>co...
display中的box-flex属性
木子木木的专栏
04-25 610
box-flex是css3新添加的盒子模型属性，它的出现可以解决我们通过N多结构、css实现的布局方式。 最经典的一个布局应用就是布局的垂直等高、水平均分、按比例划分。 目前box-flex属性还没有得到firefox、Opera、chrome浏览器的完全支持，但可以使用它们的私有属性定义firefox(- moz)、opera(-0)、chrome/safari（-webkit)。 即：-web...
CSS3新属性box-flexd弹性盒模型
u013084331的博客
03-09 1317
1、介绍:box-flex是css3属性，需考虑兼容性问题。(大部分浏览器已经实现了无前缀版本) #element{ box-flex:1.0;   /*必须是整数，占父元素几等分的意思*/ -moz-box-flex:1.0;   /* Firefox的兼容性*/ -webkit-box-flex:1.0; /*Safari和Chrome的兼容性*/ -o-box-flex:1.0;
html弹性盒子布局,实例讲解CSS3中的box-flex弹性盒属性布局
weixin_36048031的博客
06-30 868
box-flex是css3新添加的盒子模型属性，它的出现打破了我们经常使用的浮动布局，实现垂直等高、水平均分、按比例划分。但是它有一定的局限性，在firefox、chrome这浏览器下需要使用它们的私有属性来定义：firefox(-moz)、chrome(-webkit)。一、box-flex属性box-flex主要让子容器针对父容器的宽度按一定规则进行划分。CSS Code复制内容到剪贴板111...
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值