因为flex属性默认值为flex:0 1 auto;其中 1 为 flex中的 flex-shrink 属性。

该属性介绍:

一个数字，规定项目将相对于其他灵活的项目进行收缩的量。

根据上述介绍可以理解为默认 1 为开启收缩

所以可以将display:flex;下的子元素的flex属性设置为flex:0 0 auto;

解决了display:flex下的子元素设置宽度无效的问题。

display:flex;下的子元素width无效问题的更多相关文章

  1. jquery层级原则器（匹配父元素下的子元素）

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  2. Flex 4 不同主题下容器子元素的管理方法

    Flex 下,容器主要分两类:Spark容器, Halo容器. Spark容器 Halo容器 说明 numElements numChildern 容器的子元素数量. addElement( ) ad ...

  3. 关于在transform下的子元素设置fixed无效的困惑

    最近的项目是要实现一个点击显示隐藏边栏的效果,而且需要边栏随着滚动而滚动. 思路简单,不就一个css的动画和一个position为fixed,搞定!但不想,设为fixed的子元素竟然无法fixed,这 ...

  4. 使用flex防止fit-content子元素冲出父元素宽度的方法

    父元素设置了min-width:fit-content后,其宽度由子元素的宽度来决定 <!DOCTYPE html> <html lang="en"> &l ...

  5. flex布局取消子元素（img、div等）缩放：

    取消子元素(img.div等)缩放: 父元素: display: flex ; 子元素: flex-shrink: 0;

  6. js 下获取子元素的方法

    笔记核心: firstElementChild只会获取元素节点对象,从名称就可以看出来,firstChild则可以获取文本节点对象(当然也可以获取元素节点对象),比如空格和换行都被当做文本节点. js ...

  7. stylus选中hover元素的兄弟元素下的子元素

    stylus设置兄弟元素样式:鼠标浮动在 .video-li 元素上时,.video-li 兄弟中 .video-info 下的 .word 显示. .video-li &:hover ~ . ...

  8. C# 根据Combobox控件来动态显示TabControl下的子元素

    根据下来列表来动态显示TabControl下的元素 需要准备两个控件:Combobox (命名为:cbPrjType)和 TabControl (命名为:tabPrjType),TabControl下 ...

  9. IE8 td元素 width无效的bug;

    不经意间做项目发现IE的td在某种情况下好奇怪,自己设置的width不起作用: 后经google大法,发现解决方案:已验证过完美解决bug; <table style="width:  ...

随机推荐

  1. CSS Transform完全指南(第二版) #flight.Archives007

    Title/ CSS Transform完全指南(第二版) #flight.Archives007 序: 第7天了! 终身学习, 坚持创作, 为生活埋下微小的信仰. 我是忘我思考,共同进步! 简介: ...

  2. js随机显示图片

    定义一个图片数组,生成一个随机数对应数据索引. window.onload = choosePic; function choosePic() { var myPix = new Array(&quo ...

  3. SpringBoot整合mybatis快速入门

    一.创建一个SpringBoot项目                 二.引入相关依赖 <!--web核心依赖--> <dependency> <groupId>o ...

  4. Jackson的使用和定制

    springmvc在使用注解@ResponseBody返回一个POJO对象时, 其内部会借助Jackson来完成POJO转化为JSON的工作. public class Message { priva ...

  5. vue2.0中模拟数据的配置

    在开发过程中,有时候接口跟不上我们的进度,我们要测试,就需要自测. 现在vue已经升级到2.0版本了,早期在vue构建工程文件在build里面有dev-server.js,但是后来构建去除了该文件集成 ...

  6. mysql ORDER BY 中文出现错误问题

    在MySQL中,我们经常会对一个字段进行排序查询,但进行中文排序和查找的时候,对汉字的排序和查找结果往往都是错误的. 这种情况在MySQL的很多版本中都存在. 如果这个问题不解决,那么MySQL将无法 ...

  7. jQuery中获取属性值：attr()、html()、text()、val()等(一)

    <!DOCTYPE html> <html> <head> <title>01_basic.html</title> <meta na ...

  8. 刷题-力扣-337. 打家劫舍 III

    337. 打家劫舍 III 题目链接 来源:力扣(LeetCode) 链接:https://leetcode-cn.com/problems/house-robber-iii 著作权归领扣网络所有.商 ...

  9. Redis详解（一）——

    Redis详解1 https://www.cnblogs.com/MoYu-zc/p/14985250.html https://www.cnblogs.com/xiaoxiaotank/p/1498 ...

  10. rtsp->rtmp 推流直播 Plan B

    上篇文章我们谈到使用 EasyDarwin 推流后 前端HTML播放器 播放无画面的情况,找了各种播放器都服务正常解决,但使用VLC却能正常播放的问题,我们尝试了很久最后另辟蹊径,找到 nginx安装 ...