flex布局下,盒子被挤压时如何解决
flex-shrink
flex-shrink 属性指定了 flex 元素的收缩规则,默认值是1。在flex 元素的默认宽度之和大于容器的宽度时候,元素会发生收缩,其收缩的大小的依据是 flex-shrink 值。
<div style="display:flex; align-items: center; margin:100px;"><div style="width: 100px; height:30px; background: gray; "></div><div style="width: 100px; height:30px; background: pink; "></div><div style="width: 300px; height:30px; background: rgb(182, 182, 78); "></div><div style="width: 300px; height:30px; background: rgb(165, 96, 165); "></div>
</div>
子元素的宽度之和为 100+100+300+300=800px,每个子的默认flex-shrink值是1。
当父容器被压缩到小于800px的时候,比如压缩到560px时,里面的子元素也会被相应地压缩。各个子元素被压缩掉多少宽度呢?
4个子div的宽度比是 1:1:3:3,4个子元素的默认flex-shrink值都是1,所以flex-shrink比例:1:1:1:1。
(1:1:3:3) x (1:1:1:1) = 1:1:3:3,得每个子元素的被压缩掉的那部分宽度的比例是 1:1:3:3 。
父容器从800px收缩到560px,即总宽度被压缩掉了240px,则每个子元素相应被压缩掉
30px、30px、90px、90px。所以每个子元素的剩余宽度是:
示例2
当不想某个子元素在父容器变窄时被压缩,可以使用 flex-shrink:0 ,比如
4个子div的宽度比是 1:1:3:3,4个子元素的flex-shrink值的比例是:1:1:0:1。
(1:1:3:3) x (1:1:0:1) = 1:1:3:3,得每个子元素的被压缩掉的那部分宽度的比例是 1:1:0:3 。
父容器从800px收缩到560px,即总宽度被压缩掉了240px,则每个子元素相应被压缩掉
48px、48px、0px、144px。所以每个子元素的剩余宽度是:
最后注意:如果元素不是弹性盒对象的元素,则 flex-shrink 属性不起作用。
flex布局下,盒子被挤压时如何解决相关推荐
- 弹性盒子模型中`display:flex`布局下`white-space:nowrap`失效问题
文字长度过长显示省略号的样式设置方法众所周知: <!-- 单行显示省略号 --> .css {white-space: nowrap;overflow: hidden;text-overf ...
- css不换行省略号 没作用,flex布局下,css设置文本不换行时,省略号不显示的解决办法...
大致是有一个 main 容器是 flex 布局,左边一个 logo 固定宽高,右边 content 动态宽度. a name a info Lorem ipsum dolor sit amet, co ...
- flex布局下文字超出省略号代替不起作用解决方法
项目中发现,在flex布局下,希望目标元素文字超出省略号时,text-overflow: ellipsis属性无效,结论是设置文字超出省略号的元素,然后网上找了一圈设置父元素width: 0.over ...
- Flex布局下,文字超出省略号显示无效解决方案
默认的flex布局下的 标题文字超出后省略号显示无效 解决办法: 在flex:1的盒子中,设置overflow: hidden; 或 width: 0;即可. <div class=" ...
- flex布局换行盒子上下有缝隙
flex布局换行盒子上下有缝隙 可能是其他盒子有高度的原因 撑开了 display: flex; flex-wrap: wrap; align-content: flex-start;//侧轴应该就好 ...
- display:flex布局下white-space:nowrap失效问题解决
文字长度过长显示省略号的样式设置方法众所周知: h3 {white-space: nowrap;overflow: hidden;text-overflow: ellipsis; } 然而有一次,我在 ...
- flex布局的盒子模型
flex盒子模型由容器(flex container)以及容器的直接子元素(flex item)组成. 以容器(flex container)定义,有主轴(main axis)以及交叉轴(cross ...
- flex 布局下关于容器内成员 flex属性的理解
flex布局分为容器的设置和容器内成员的设置,容器的设置是管理成员的排列方式,也就是管理排列的方向和对齐的位置.成员的设置则是关于成员的大小和显示的位置(order). 弹性布局,弹性布局,自然要提现 ...
- css中flex布局固定宽度盒子被压缩问题解决
当一个flex布局,有固定宽度盒子和使用flex: 1;,当内容过多时固定宽度的盒子被压缩宽度. 解决方法1: 给固定宽度的盒子设置min-width值 解决方法2: 给固定宽度的盒子设置flex-s ...
最新文章
- Floyd-傻子也能看懂的弗洛伊德算法
- linux日志本地存储和网络存储,文件系统和本地存储管理 1
- 浏览器直接访问Linux云服务器下的文件
- 08 Spring框架 AOP (一)
- DevOps正在扼杀程序员?
- java 接口可以被继承_接口能被继承吗?
- webApplicationContext 与servletContext
- PATHLOSS.4.0 无线电设计软件
- 优酷KUX格式视频如何快速转换MP4格式
- 同相放大、反向放大、差分放大电路的开环增益
- 计算机网络管理(第二版)自学教程
- ipad为什么显示itunes store无法连接服务器,ipad无法连接itunes store怎么办
- 小甲鱼PE详解之资源(PE详解11)
- 诊断皮肤癌,人工智能比医生更出色
- Java高并发程序设计(三)——JDK并发包(二)
- python生成的word表格设置内容居中
- [Python]简单抓取百度blog
- Jenkins无法启动:com.michelin.cio.hudson.plugins.rolestrategy.RoleBasedAuthorizationStrategy
- 多线程 4——线程通信、线程池、定时器
- 第二代3D TLC NAND原厂级深度评测 | 是否如你所愿?