背景，做一个前面图片宽度固定，后面宽度自适应，使用到了flex布局，但是想让后面div里文字不换行，超出以点点表示时，这时布局就乱了，查了下，原来flex布局与white-space:nowrap有影响

解决办法，父div设置min-width:0即可

flex: 1;
min-width: 0;

w3c上面是这样说的

By default, flex items won’t shrink below their minimum content size (the length of the longest word or fixed-size element).

因为设置了white-space:nowrap，所以content没法收缩了，设置0后就有了固定尺寸就可以收缩了

记录走过的路，踩过的坑，互勉。

　　前端交流群：87709616

有不同意见的可以留言，我们一起讨论。

转载至：https://segmentfault.com/q/1010000011466651/a-1020000011490454

土旦：关于display:flex碰上white-space nowrap 影响布局的问题的更多相关文章

  1. 多栏多列布局（display:flex）

    display:flex 多栏多列布局浏览器支持情况:火狐直接支持w3c无前缀写法,谷歌和opera支持-webkit- 前缀写法,比较适合移动端开发使用, display:flex 这个牛逼的css ...

  2. display:flex 多栏多列布局

    转自:http://www.360doc.com/content/14/0811/01/2633_400926000.shtml display:flex 多栏多列布局浏览器支持情况:火狐直接支持w3 ...

  3. CSS弹性盒布局(display:flex)

    CSS弹性布局(display:flex) 参考: http://www.runoob.com/w3cnote/flex-grammar.html https://www.jianshu.com/p/ ...

  4. 浅谈display:flex

    display:flex 意思是弹性布局 首先flex的出现是为了解决哪些问题呢? 一.页面行排列布局 像此图左右两个div一排显示 可以用浮动的布局方式 html部分 css部分 这种布局有两个缺点 ...

  5. （有趣）chrome不同浏览器版本对display:flex和溢出隐藏显示省略符号的bug

    项目中碰到一个十分有趣的情形: 布局要求是这样:右边创建新订单是固定宽度80px,左侧是自适应宽度,溢出隐藏.如下图. 这里布局不用说肯定使用display:flex的.左侧flex:1;右侧widt ...

  6. CSS3 display:flex和display:box有什么区别？

    **区别**,仅是各阶段草案命名.- W3C 2009年第1次草案:[display:box;](https://www.w3.org/TR/2009/WD-css3-flexbox-20090723 ...

  7. display flex 和a标签不行

    父元素display: flex;  display: -webkit-flex; flex-flow: row wrap; -webkit-flex-flow: row wrap; 配合子元素 fl ...

  8. 弹性盒布局display:flex详解

    一:弹性盒子 随着响应式设计的流行,网站开发者在设计网页布局时往往要考虑到页面在适配不同分辨率的浏览器时其内部组件位置大小都会产生变化,因此需要设计者根据窗口尺寸来调整布局,从而改变组件的尺寸和位置, ...

  9. 微信小程序view标签以及display:flex的测试

    一:testview.wxml,testview.js自动生成示例代码 //testview.wxml <view class="section"> <view ...

随机推荐

  1. Python + Appium 环境搭建

    ---恢复内容开始--- Appium自动化公司内部测试培训1-环境搭建 课程目的 一.Python + Appium 环境搭建 课程内容 1    安装前准备工作 搭建环境所需要的安装文件已经下载好 ...

  2. Setting up Latex-vim (or Latex-suite) plugin within macVim under Mac OSX Yosemite 2015-1-20 by congliu

    1. Overview: Vim是命令行下的文本编辑程序,gVim是Vim的Linux下的图形化版本,macVim是Mac下的图形化版本 Latex-vim是vim写Latex文件时的插件 Skim是 ...

  3. Javassist字节码增强示例

    概述 Javassist是一款字节码编辑工具,可以直接编辑和生成Java生成的字节码,以达到对.class文件进行动态修改的效果.熟练使用这套工具,可以让Java编程更接近与动态语言编程. 下面一个方 ...

  4. vritualenv虚拟环境迁移

    vritualenv虚拟环境迁移的简单步骤: 1.进入原虚拟环境env1,然后执行pip freeze > requirements.txt将包依赖信息保存在requirements.txt文件 ...

  5. k8s 各种网络方案 - 每天5分钟玩转 Docker 容器技术（170）

    网络模型有了,如何实现呢? 为了保证网络方案的标准化.扩展性和灵活性,Kubernetes 采用了 Container Networking Interface(CNI)规范. CNI 是由 Core ...

  6. SpringBoot操作数据库 2017.12.14

    http://blog.csdn.net/forezp/article/details/61472783

  7. DUBBO报错分析—1（连接zookeeper成功，调用方法无反应，不报错）

    思路分析 调用方法时,最后调用执行的是mapper的sql语句,既然调用对应的方法无法获取返回值,多是sql错误,但是并未报sql错误,说明可能是与sql相关的数据源配置错误. 过程调试 经尝试,当直 ...

  8. Linux运行firefox出错

    虚拟机自带的firefox版本太旧了,于是在官网上下载了最新的安装包,运行后提示: $ firefox XPCOMGlueLoad error for file /home/parallels/fir ...

  9. com.mysql.jdbc.Driver 和 com.mysql.cj.jdbc.Driver的区别 serverTimezone设定

    转自: http://blog.csdn.net/superdangbo/article/details/78732700 com.mysql.jdbc.Driver 和 com.mysql.cj.j ...

  10. Kafka元数据缓存(metadata cache)

    经常有人问的一个问题就是:Kafka broker到底是不是无状态的?网上有这样的说法: 正常情况下consumer会在消费完一条消息后线性增加这个offset.当然,consumer也可将offse ...