flex布局，当页面宽度变小时，元素被压缩

最新推荐文章于 2023-07-17 14:02:00 发布
最新推荐文章于 2023-07-17 14:02:00 发布
阅读量1.3k 收藏 3
点赞数 1
分类专栏： jQuery CSS
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_43654065/article/details/118766214
版权
jQuery 同时被 2 个专栏收录
109 篇文章 3 订阅
订阅专栏
CSS
97 篇文章 1 订阅
订阅专栏

当子元素设置固定宽度时，如果整体宽度变小，固定元素的宽度就会被压缩。解决方法是给固定宽度的子元素添加 flex-shrink：0

flex-shrink

指定了flex元素的收缩规则。flex元素仅在默认宽度之和大于容器的时候才会发生收缩，其收缩的大小是依据flex-shrink的值的。

在线小白www
关注
  • 1
    点赞
  • 踩
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
使用flex布局轻松实现页面布局的示例代码
01-18
废话不多说，直接上代码： 1、上中下布局： <!DOCTYPE html> <html lang=en> <head> <meta charset=UTF-8> <meta name=viewport content=width=device-width, initial-scale=1.0> <title>Document</title> <style> body { position: absolute; left: 0; right: 0; top: 0; bottom: 0;
vue移动app项目中使用flex布局，呼出手机键盘页面被顶起和压缩的问题
闻人放歌的三寸青草园圃
12-05 3856
在移动项目开发中遇到这个问题。 原因分析：因为flex布局是根据页面宽高度进行变化的，因此，当底部弹出手机软键盘时，因页面高度变化导致页面因而变化。 解决方法：只要知道了原因，那么解决就很简单了。我们只需要在app这个div初始化完成时，获取手机的屏幕高度，并将值赋给height就行了。 App.vue: var height= document.documentElement.clientHei...
移动端基础 flex布局
weixin_47543596的博客
12-23 331
移动端基础 浏览器现状 PC端常见浏览器：360浏览器、谷歌浏览器、火狐浏览器、QQ浏览器、百度浏览器、搜狗浏览器、IE浏览器。 移动端常见浏览器：UC浏览器，QQ浏览器，欧朋浏览器，百度手机浏览器，360安全浏览器，谷歌浏览器，搜狗手机浏览器，猎豹浏览器，以及其他杂牌浏览器。 国内的UC和QQ，百度等手机浏览器都是根据Webkit修改过来的内核，国内尚无自主研发的内核，就像国内的手机操作系统都是基于Android修改开发的一样。 总结：兼容移动端主流浏览器，处理Webkit内核浏览器即可。 手机屏幕的现状
echarts不适配问题 页面大小发生改变 echarts不会跟随改变
canRun_的博客
07-17 778
我们可以通过监听window的尺寸 在发生变化的时候调用echarts.resize()方法就可以解决echarts适配问题。当我们浏览器缩小的时候发现echarts并没有随之缩小只有再次刷新后在可以缩小。echarts需要做适配 我用了vw单位。
Flex布局
wendZzoo的博客
10-30 293
Flex是Flexible Box的缩写，意为"弹性布局"，用来为盒状模式提供最大的灵活性。flexbox布局常用于比较复杂的页面，可以轻松实现屏幕和浏览器窗口的大小发生变化时保持元素的相对位置和大小不变，同时减小了依赖于浮动布局实现元素位置的定义以及重置元素的大小。任何一个容器都可以指定为Flex布局. .box{     display: flex; } 行内元素也可以使用Flex布局....
使用element的el-table+flex布局后，缩放浏览器，表格不能缩小问题的解决方案
砚之
03-11 8094
el-table, flex，缩放浏览器， 宽度自适应
使用Flex布局造成的浏览器缩放时，内部页面改变大小缓慢问题
blueshenmi的博客
02-20 4818
问题原因 （1）在项目中，使用iview作为ui组件开发，使用vue作为前端框架； （2）在人员管理界面，左边是部门树，右边是人员列表； （3）当点击浏览器右上角的缩小按钮时，改页面出现人员列表右边部门缩放缓慢，并且超过了5秒钟，严重影响用户体验。 （4）调查原因中发现：使用flex布局进行自适应时，计算缓慢；再加上iview的表格组件在进行缩放时的宽度计算也要耗费一些时间，因此造成了上述问题的出...
解决设置了display：flex的元素，他的子元素里面没有设置flex属性的元素页面缩放的时候宽度会被压缩的问题
qq_29705009的博客
12-03 802
解决设置了display：flex的元素，他的子元素里面没有设置flex属性的元素页面缩放的时候宽度会被压缩的问题
使用flex + element ui table浏览器缩放问题
xunloveo的博客
11-04 1686
使用flex + element ui table浏览器缩放问题 场景：在两栏布局的情况下，左侧固定宽度， 右侧设为flex： 1，并且右侧内容有table布局，此时你放大浏览器，表格会相应的放大，但你缩小浏览器的时候，并不会相应的缩小，如下图所示， 图例来自它处 解决思路： 在flex为1的那个元素设置相对定位，并且添加一个子元素，设置绝对定位，宽度为100%,这样表格就能随之改变了 <div class="container"> <div class="left">
flex绘制性能优化
程序员
11-14 716
在flex开发过程中，其实大部分的性能损耗和内存占用都是在舞台的元素中，包括元素重绘所占用的cpu等等，之前在flash开发时，一般的shape，sprite，movieclip等对象使用的比较多，而且他们占用内存更少，你可以通过函数：getSize(object) 来测试一下他们的大小。进入flex开发后，由于场景中的可视化元素都要继承IVistualElement这个接口才能进行展示，所以之前
详解flex布局的元素如何分配容器的剩余空间
01-19
自从开始开学习 CSS 布局，想要比较灵活的把父元素的空间分配给各个子元一直是各个前端程序员的梦想。 在 flex 之前，如果不是专门去搜索相关的解决方案，一般人几乎想不出非常灵活的三（多）栏等高布局方案，而即使...
移动端Web页面的CSS3 flex布局快速上手指南
12-13
row表示按行显示，wrap设置当父元素过小时是否换行。注意flex-flow是flex-direction和flex-wrap两个属性合在一起定义了，分开设定也可以。flex-direction的属性：row:行显示；column:列显示；row-reverse/column-re
css3 flex布局实现平均分配元素的示例代码
11-20
本文主要介绍了css3 flex布局实现平均分配元素，给自己留个笔记，也分享给大家，具体如下： 例子一： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>flex ...
flex布局实战搭建网页页面
01-03
html+css，使用flex布局搭建页面，纯前端，初学党可借鉴学习如何使用flex布局页面
window.URL.createObjectURL
热门推荐
qq_43654065的博客
09-15 1万+
创建一个新的对象URL，该对象URL可以代表某一个指定的file对象或者bold对象。 可以用于在浏览器上预览本地的图片或者视频。 URL对象是硬盘（SD卡等）指向的一个文件路径，如果我们做文件上传的时候，想在没有上传服务器端的情况下看到上传图片的效果图的时候，就可以通过var url = window.URL.createObjectURL(files[0])；获得一个http格式的url路径，这个时候就可以设置img中的src进行显示了。 语法 bold参数是一个file对象或者bold对象。
修改select及option的样式
qq_43654065的博客
07-28 1万+
html <select class="select"> <option value="volvo" disabled>Volvo</option> <option value="saab">Saab</option> <option value="opel">Opel</option> <option value="audi">Audi</opti.
前端请求的后台数据如何实时刷新
qq_43654065的博客
08-04 9990
1. 轮询 使用定时器不断调用请求接口。 如果要实现实时刷新，定时器的时间必须设置的很小。但如果时间设置很小，用户使用量太多，导致短时间内的请求次数会非常多，需要消耗大量的服务资源。 function getData(){ $.getJSON("url",param,function(data){ }) setTimeout(getData,5000) } 2. webSocket 服务器端推送的方式，通过使用webSocket，进入页面，前端与服务端建立起so
js中的异步操作有哪些
qq_43654065的博客
11-19 5901
1. setTimeout、setInterval 2. Ajax请求一般采用异步，当然也可以设置为同步 3. promise.then 4. 回调函数可以理解为异步，但不是严格的异步操作 5.事件监听。即监听某个事件，当事件发生时，再执行相应的操作（比如点击、mouseover等）。 ...
获取select的值
qq_43654065的博客
03-24 4585
jQuery方法 jquery 获取select的值，也就是被选中的那个 option 的 value 属性的值 通过 select 的 id $('#select_id option:selected').val(); $('#select_id').find('option:selected').val(); 或者用原生的方式 $('#select_id option:selected')[0].value; 通过 select 的 name $('select[name="select
flex布局压缩子元素宽度
最新发布
10-14
可以使用 flex-shrink 属性来压缩子元素的宽度。当容器空间不足时，子元素会按照 flex-shrink 的比例进行压缩，直到满足容器的大小为止。 例如，设置一个容器为 flex 布局，子元素为三个 div 元素，分别设置宽度为 100px、200px、300px，当容器宽度为 400px 时，第一个子元素会被压缩为 80px，第二个子元素会被压缩为 160px，第三个子元素不会被压缩。 示例代码如下： ```html <div class="container"> <div class="item item1"></div> <div class="item item2"></div> <div class="item item3"></div> </div> ``` ```css .container { display: flex; width: 400px; } .item { height: 50px; margin-right: 10px; } .item1 { width: 100px; flex-shrink: 1; } .item2 { width: 200px; flex-shrink: 2; } .item3 { width: 300px; } ```

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值