Flex布局自适应失效的问题

最新推荐文章于 2023-05-05 13:29:58 发布
最新推荐文章于 2023-05-05 13:29:58 发布
阅读量1.3k 收藏
点赞数
文章标签： css css3 前端
原文链接：https://baijiahao.baidu.com/s?id=1721899116766856090&wfr=spider&for=pc
版权

  前几天做公司的项目，测试测出来一个问题，在一个表单里面，如果字段过长就会导致后面的内容会被覆盖，但是我使用到的公司的组件，已经做了自适应布局并且有做单行溢出显示省略号，后来我上网查了一下flex布局自适应失效问题，发现下面这篇文章，主要是因为我使用到了:white-space:nowrap,这个属性导致的,具体原因和分析可参考这篇文章：

Flex布局下，white-space:nowrap导致布局自适应失效的解决办法！

A &......
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
深入理解Flex布局以及计算
02-25
对于Flex布局，阅读了大漠老师和其他老师写的文章后，我还是不太理解Flexbox是如何弹性的计算子级项目的大小以及一些其他细节。在大漠老师的帮助下，我去查阅Flexbox的W3C规范文档。注：本篇博文不适合未接触过Flex布局的人,如果想了解flex布局基础。请参考理解Flexbox：你需要知道的一切flex盒模型是被期望设计成：在任何流动的方向上(包括上下左右)都能进行良好的布局可以以逆序或者以任意顺序排列布局可以线性的沿着主轴一字排开或者沿着侧轴换行排列可以弹性的在任意的容器中伸缩大小（今天重点研究的主题）可以使子元素们在容器主轴方向上或者在容器侧轴方向上进行对齐可以动态的沿着主轴方向伸
Flex布局做出自适应页面(语法和案例)
11-20
Flex布局简介 Flex英文为flexiable box，翻译为弹性盒子，Flex布局即弹性布局。 Flex布局为盒子模型提供了很大的灵活性，任何一个容器都可以指定为Flex布局，设置方法为： .box{ display: flex; } 行内元素使用Flex布局 .box{ display: inline-flex; } 在webkit内核的浏览器上必须加上webkit前缀 .box{ display: flex; display: -webkit-flex; } 注意：使用Flex布局之后，里面的float、clear、vertical-align属
css3之gap属性；flex布局可以用到
weixin_43925630的博客
02-15 1096
flex布局，元素之间要是有距离，不用margin,不用space-beween;
flex布局兼容性问题小结
01-21
一.W3C各个版本的flex 2009 version 标志：display: box; or a property that is box-{*} (eg. box-pack) 2011 version 标志：display: flexbox; or the flex() function or flex-pack property 2012 version 标志：display: flex/inline-flex; and flex-{*} properties 2014 version 新增了对flex项z-index的规定 2015 W3C Editor’s Draft 没有大的改动
flex布局实现左侧文字溢出省略右侧文字自适应
09-22
主要介绍了flex布局实现左侧文字溢出省略右侧文字自适应的相关资料，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
小程序 scroll-view flex布局下align-items和gap无效
weixin_44240581的博客
10-27 1085
小程序 scroll-view flex布局下align-items无效。
解决flex gap兼容性问题
wz9608的博客
05-05 5777
一个项目写下来，在网页端预览的时候正常，结果到产品经理手上。设计稿样式实际产品手机上样式产品：“你这玩意儿怎么没间距？我：“为什么我的正常？？？呐呐呐你看我手机（来自RedmeK50Utral）”产品：“哦，你看我的手机（来自荣耀20）”我：“。。。至此我看了看我代码中的一堆gap，再看了看她那还不退休的老安卓，陷入了沉思！以上就达到了gap同样的效果，并且保持了良好的兼容性。妈妈再也不怕兼容性不好的手机用不了gap啦！总之不管用的什么打包工具，vite也要webpack也好，原理是一样的。
原生小程序 flex gap 在某些机型上失效
weixin_43951592的博客
11-25 847
小程序坑
flex布局
酒客的博客
12-02 201
Flex布局的使用 ​ 网页布局（layout）是 CSS 的一个重点应用。布局的传统解决方案，基于盒状模型，依赖 display 属性 + position属性 + float属性。它对于那些特殊布局非常不方便，比如，垂直居中就不容易实现。 ​ 2009年，W3C 提出了一种新的方案----Flex 布局，可以简便、完整、响应式地实现各种页面布局。目前，它已经得到了所有浏览器的支持，这意味着，现在就能很安全地使用这项功能。Flex 布局将成为未来布局的首选方案。 flex的使用 介绍 ​ 首先flex分为
Flex布局及Grid布局
obj_obj_baby的博客
07-06 4434
Flex与Grid布局
公共样式记录
qq_39131699的博客
04-02 118
// flex适配 .flex { display: flex; /* Chrome 29+, Firefox 22+, IE 11+, Opera 12.1/17/18, Android 4.4+ */ display: -webkit-box; /* Chrome 4+, Safari 3.1, iOS Safari 3.2+ */ display: -moz-box; /* Firefox 17- */ display: -webkit-flex; /* Chrome 21+, Saf
CSS 弹性布局
stanwuc的博客
01-10 316
弹性布局
CSS3 6.6学习笔记
Shelysure的博客
06-06 207
border-image border-image 属性是一个简写属性，用于设置以下属性： border-image-source border-image-slice border-image-width border-image-outset border-image-repeat 样例： <!DOCTYPE html> <html> <head> <style> div { border:15px solid transparent; width
CSS多列属性详解
web_hxx的博客
10-10 212
CSS多列属性 在本章中，您将了解以下多列属性： column-count column-gap column-rule-style column-rule-width column-rule-color column-rule column-span column-width 下表列出了所有多列属性： 属性 描述 column-count 指定元素应划分的列数...
web前端开发大杂烩
dap769815768的博客
11-26 844
react版本：^17.0.2 typescript版本：^4.5.2 1.单行文本超出部分用省略号代替： div{ white-space: nowrap; text-overflow: ellipsis; overflow: hidden; width: 200px; } 该方法只有在单行情况下才会生效，也就是white-space: nowrap;时。针对多行文本，相对比较复杂，需要计算每个文字在当前样式下的宽度，然后再根据所在div的实际宽度进行针对性处理。
css 不生效，这是什么情况？
weixin_42603332的博客
12-21 2451
有几种可能的原因导致 CSS 不生效： CSS 文件没有正确加载。检查你的 HTML 代码是否正确引用了 CSS 文件，并确保 CSS 文件的路径是正确的。 CSS 规则没有应用到相应的元素上。检查你的 CSS 代码是否正确地选择了相应的元素，并确保你的 CSS 规则的优先级足够高。 浏览器不支持你使用的 CSS 特性。确保你使用的 CSS 特性在目标浏览器中是受支持的。 CSS 被其他样...
CSS中的flex和grid布局
Peggy0829的博客
06-22 827
1.flex布局 flex布局：flex布局是弹性布局，用来为盒模型提供最大的灵活性。任何一个容器都可以指定为flex布局。但是，设置为flex布局后，子元素的float，clear，vertical-align属性都会失效。 我们对于采用flex布局的元素，称为容器，对于子元素，称为项目。 布局原理：通过给父盒子添加flex属性，来控制子盒子的位置和排列方式。 1. 1 一些常见的父项属性（容器） flex-direction：设置主轴方向 row：默认值，水平方向从左到右 column：侧轴，垂直
CSS多列布局和常见bug解析
Etherege_x的博客
11-16 619
CSS多列布局和常见bug解析 多列布局 【1】. column-count - - - - -定义列数 【2】. column-gap - - - - -设置列与列之间距离 【3】.column-rule - - - - -设置列与列之间的分割线 分属性： column-rule-width | column-rule-style | column-rule-color 【4...
android中自适应布局教程,Android弹性收缩自适应布局FlexboxLayout详解
weixin_30764887的博客
05-25 244
Android弹性收缩自适应布局FlexboxLayout其在github上的项目主页：https://github.com/google/flexbox-layout使用前先添加引用：dependencies{implementation'com.google.android:flexbox:0.3.2'}写一个布局演示：xmlns:app="http://schemas.android.c...
flex布局图片自适应
最新发布
09-01
Flex布局可以实现图片的自适应效果。通过设置容器的display属性为flex，可以让容器内的元素按照弹性布局排列。在Flex布局中，可以利用flex属性来控制元素的伸缩性，使其能够自适应容器的宽度。 具体实现方法如下： 1. 在CSS代码中，使用flex布局进行排列。可以使用flex-wrap属性来确定是否换行，并使用justify-content属性来控制元素在主轴上的对齐方式。 2. 根据图片的个数和容器的宽度，计算出每个图片的宽度，并设置对应的样式。 3. 如果一行的图片没有撑满容器的宽度，可以通过生成一个div元素并将图片撑满来实现自适应效果。 4. 将图片的数据按照一定的规则转化为二维数组，方便进行展示。 通过以上步骤，可以实现flex布局下的图片自适应效果。<span class="em">1</span><span class="em">2</span><span class="em">3</span> #### 引用[.reference_title] - *1* [Flex布局做出自适应页面(语法和案例)](https://download.csdn.net/download/weixin_38732842/13129690)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 33.333333333333336%"] - *2* [flex布局(图片自适应展示)](https://blog.csdn.net/lydia_love/article/details/117264153)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 33.333333333333336%"] - *3* [弹性盒子布局宽度自适应-图片自适应](https://blog.csdn.net/weixin_46078934/article/details/122837838)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 33.333333333333336%"] [ .reference_list ]

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值